/* BUILD A PLAYER 1v1 — overlay UI. Sits above page content, below site modals. */
#b1Root { position: fixed; inset: 0; z-index: 9000; display: none; overflow-y: auto;
  background: var(--bg-3, #0a121c); color: var(--text, #eef4fb); }
#b1Root.b1-open { display: block; position: static; inset: auto; min-height: 100vh; overflow: visible; }
/* IN-FLOW GAME (Anthony): the real site header stays at the top and scrolls
   away like on every other game — no body lock, everything else hidden */
body.b1-active > :not(#b1Root):not(.topbar):not(.modal-overlay):not(.foot):not(script):not(style):not(link) { display: none !important; }
/* the footer sits BEFORE #b1Root in the DOM — flex-order it below the game
   (Anthony's screenshot: footer rendered between the header and the match) */
body.b1-active { display: flex; flex-direction: column; min-height: 100vh; }
body.b1-active > .foot { order: 9; margin-top: auto; }
body.b1-active > #b1Root { width: 100%; }
body.b1-active .modal-overlay { z-index: 2147483000; }   /* sign-in above overlay AND site header */

.b1-wrap { max-width: 760px; margin: 0 auto; padding: 16px 14px 48px; }
.b1-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.b1-title { font-family: "Oswald", sans-serif; font-weight: 700; letter-spacing: .5px; font-size: 17px; }
.b1-x { background: none; border: 1px solid var(--line, rgba(255,255,255,.14)); color: var(--text, #eef4fb);
  width: 34px; height: 34px; border-radius: 10px; font-size: 19px; cursor: pointer; }

.b1-mm { text-align: center; padding: 40px 8px; }
.b1-mm h2 { font-family: "Oswald", sans-serif; font-size: 24px; margin: 0 0 8px; }
.b1-dim { color: var(--text-dim, #b9cbdd); margin: 6px 0; font-size: 14px; }
.b1-faint { color: var(--text-faint, #7d90a5); font-size: 12.5px; text-align: center; margin: 10px 0 0; }
.b1-spin { width: 46px; height: 46px; margin: 0 auto 18px; border-radius: 50%;
  border: 4px solid rgba(224,169,58,.25); border-top-color: #e0a93a; animation: b1spin 1s linear infinite; }
.b1-spin-sm { display: inline-block; width: 13px; height: 13px; border-width: 2px; margin: 0 6px -2px 0; }
@keyframes b1spin { to { transform: rotate(360deg); } }
.b1-btn { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 15px; padding: 11px 22px; border-radius: 12px;
  cursor: pointer; border: 1px solid var(--line, rgba(255,255,255,.18)); background: var(--surface, #122130); color: var(--text, #eef4fb); }
.b1-btn.b1-gold { background: linear-gradient(135deg, #f0c04e, #cf962f); color: #241a05; border: none; }
.b1-btn.b1-ghost { background: none; color: var(--text-dim, #b9cbdd); }
.b1-btn:hover { filter: brightness(1.07); }
.b1-link { background: none; border: none; color: #e0a93a; font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; padding: 0; }
.b1-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 14px 0; }
.b1-code { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 32px; letter-spacing: 7px; color: #e0a93a;
  background: var(--surface, #122130); border: 1px dashed rgba(224,169,58,.55); border-radius: 14px;
  padding: 13px 8px 13px 15px; margin: 16px auto; max-width: 250px; user-select: all; }

/* draft — SCOREBOARD header (Anthony's mock: you vs them + ovr + filling mini
   sils, player-x-of-10 dots, whose turn, big seconds) */
.b1-status { font-family: "Oswald", sans-serif; letter-spacing: .4px; margin-bottom: 10px;
  background: var(--surface, #122130); border: 1px solid var(--line, rgba(255,255,255,.12)); border-radius: 14px; padding: 10px 14px; }
.b1-you { color: #e0a93a; font-weight: 700; }
.b1-sb-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line, rgba(255,255,255,.08)); }
.b1-sb-side { display: flex; align-items: center; gap: 10px; min-width: 0; }
.b1-sb-opp { justify-content: flex-end; }
.b1-sb-id { display: inline-flex; flex-direction: column; min-width: 0; }
.b1-sb-opp .b1-sb-id { align-items: flex-end; }
.b1-sb-name { font-weight: 700; font-size: 15.5px; letter-spacing: .8px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.b1-sb-me .b1-sb-name { color: #ff6b6b; }
.b1-sb-opp .b1-sb-name { color: #58a6ff; }
.b1-sb-ovr { font-weight: 700; font-size: 30px; line-height: 1.05; color: var(--text, #eef4fb); }
.b1-sb-ovr i { font-style: normal; font-size: 9px; letter-spacing: 1.2px; color: var(--text-faint, #7d90a5); margin-left: 4px; vertical-align: 3px; }
.b1-sb-vs { flex: none; font-weight: 700; font-style: italic; font-size: 23px; color: var(--text-dim, #b9cbdd); }
.b1-minisil { position: relative; width: 37px; height: 47px; flex: none; display: inline-block; }
.b1-minisil i, .b1-minisil em { position: absolute; inset: 0; display: block; }
.b1-minisil i { background: rgba(255,255,255,.14); }
.b1-ms-me em { background: linear-gradient(180deg, #ff8080, #e04848); }
.b1-ms-opp em { background: linear-gradient(180deg, #79b8ff, #3b82d9); }
.b1-sb-row2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 8px; }
.b1-sb-prog { display: inline-flex; flex-direction: column; gap: 5px; flex: none; }
.b1-sb-pl { font-size: 10.5px; font-weight: 600; letter-spacing: 1.1px; color: var(--text-faint, #7d90a5); }
.b1-sb-dots { display: inline-flex; gap: 4px; }
.b1-sb-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.16); }
.b1-sb-dots i.on { background: #e0a93a; }
.b1-sb-dots i.cur { background: #e0a93a; animation: b1pulse 1.1s ease-in-out infinite; }
.b1-sb-turn { display: inline-flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.b1-sb-turn b { font-weight: 700; font-size: 16.5px; letter-spacing: 1px; }
.b1-sbt-me b { color: #e0a93a; }
.b1-sbt-opp b { color: #58a6ff; }
.b1-sb-turn em { font-style: normal; font-family: Inter, system-ui, sans-serif; font-size: 13px; color: var(--text-dim, #b9cbdd); }
/* the countdown ring drains clockwise (--p = % time left, set by the clock tick) */
.b1-sb-clock { flex: none; position: relative; width: 66px; height: 66px; border-radius: 50%;
  background: conic-gradient(#e0a93a calc(var(--p, 0) * 1%), rgba(255,255,255,.13) 0);
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  transition: background .2s linear; }
.b1-sb-clock::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--bg-3, #0a121c); }   /* --surface is 95% transparent — the disc must be OPAQUE or the ring reads as a pie */
.b1-sb-clock b, .b1-sb-clock i { position: relative; }
.b1-sb-clock b { font-weight: 700; font-size: 24px; line-height: 1; color: var(--text, #eef4fb); min-height: 24px; }
.b1-sb-clock i { font-style: normal; font-size: 7.5px; letter-spacing: 1px; color: var(--text-faint, #7d90a5); }
@keyframes b1pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (max-width: 480px) {
  .b1-sb-ovr { font-size: 25px; }
  .b1-sb-name { max-width: 96px; font-size: 13.5px; }
  .b1-sb-clock { width: 58px; height: 58px; }
  .b1-sb-clock b { font-size: 21px; min-height: 21px; }
  .b1-sb-turn b { font-size: 14px; }
  .b1-sb-turn em { font-size: 11.5px; }
  .b1-sb-dots i { width: 6px; height: 6px; }
}

.b1-stage { display: flex; align-items: center; gap: 14px; justify-content: center;
  background: linear-gradient(135deg, rgba(42,75,181,.25), rgba(10,18,28,.4));
  border: 1px solid var(--line, rgba(255,255,255,.12)); border-radius: 16px; padding: 14px; margin-bottom: 12px; }
.b1-face { position: relative; width: 74px; height: 74px; border-radius: 50%; flex: none; overflow: hidden;
  background: var(--surface, #122130); border: 2px solid rgba(224,169,58,.6); display: grid; place-items: center; }
.b1-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.b1-mono { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 22px; color: var(--text-dim, #b9cbdd); }
.b1-l-name { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 22px; }
.b1-l-team { color: var(--text-dim, #b9cbdd); font-size: 12.5px; margin-top: 2px; }
.b1-cols { display: grid; grid-template-columns: 3fr 2fr; gap: 10px; }
.b1-col-h { font-family: "Oswald", sans-serif; font-size: 12px; letter-spacing: 1px; color: var(--text-faint, #7d90a5); margin: 0 0 6px 2px; }
.b1-zones { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.b1-zone { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left;
  background: var(--surface, #122130); border: 1px solid var(--line, rgba(255,255,255,.12));
  border-radius: 10px; padding: 7px 9px; color: inherit; font: inherit; min-height: 56px; }
.b1-zone:disabled { cursor: default; opacity: .92; }
.b1-openz { cursor: pointer; border-color: rgba(224,169,58,.55); box-shadow: 0 0 0 1px rgba(224,169,58,.2); }
.b1-openz:hover { background: rgba(224,169,58,.12); transform: translateY(-1px); }
.b1-z-l { font-size: 11px; color: var(--text-dim, #b9cbdd); }
.b1-z-v { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 18px; }
.b1-z-offer { color: #e0a93a; }
.b1-full .b1-z-v { color: #5fe39a; }
.b1-z-d { font-size: 10px; color: var(--text-faint, #7d90a5); }
.b1-mini { min-height: 40px; padding: 5px 8px; }
.b1-mini .b1-z-v { font-size: 14px; }

/* season + result */
.b1-race { max-width: 380px; margin: 14px auto; text-align: left; }
.b1-race-row { display: flex; justify-content: space-between; font-family: "Oswald", sans-serif; font-size: 17px; padding: 6px 2px; }
.b1-bar { max-width: 380px; height: 8px; margin: 8px auto; border-radius: 99px; background: var(--surface, #122130); overflow: hidden; }
.b1-fill { height: 100%; width: 0; background: linear-gradient(90deg, #f0c04e, #cf962f); }
.b1-h-win { color: #5fe39a; } .b1-h-loss { color: #ff7d7d; } .b1-h-draw { color: #e0a93a; }
.b1-mm h2.b1-h-win, .b1-mm h2.b1-h-loss, .b1-mm h2.b1-h-draw { font-size: 40px; letter-spacing: 2px; }
.b1-lines { line-height: 1.7; font-size: 15px; }
.b1-elo { font-size: 16px; margin: 12px 0 4px; }
.b1-elo-up { color: #5fe39a; font-weight: 700; } .b1-elo-dn { color: #ff7d7d; font-weight: 700; }
.b1-elo-even { color: var(--text-dim, #b9cbdd); } .b1-gold-t { color: #e0a93a; font-weight: 700; }

@media (max-width: 560px) {
  .b1-cols { grid-template-columns: 1fr; }
  .b1-zones { grid-template-columns: 1fr 1fr; }
  .b1-mm h2.b1-h-win, .b1-mm h2.b1-h-loss { font-size: 32px; }
  .b1-code { font-size: 26px; letter-spacing: 5px; max-width: 215px; }
}


/* ============================================================
   LIFTED FROM THE SOLO GAME (bap.css) — the reel rig, the player card and the
   stat chips, byte-compatible class names so the 1v1 looks like Build a Player.
   If solo restyles, re-lift these blocks.
   ============================================================ */
.bap-mono { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 50% 32%, #24476e, #0b1c30 78%); color: var(--gold, #ffd166);
  font-family: "Oswald", sans-serif; font-weight: 700; letter-spacing: .5px; }
.bap-mono small { position: absolute; bottom: 5px; font-size: 6px; letter-spacing: 1.6px; color: rgba(255, 209, 102, .75); font-family: "Inter", sans-serif; }
.bap-mono { position: relative; font-size: 18px; }
.bap-cell--logo { justify-content: center; padding: 0; }
.bap-cell--logo img { height: 112px; width: 112px; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); }
.bap-pc-head { display: flex; align-items: center; gap: 12px; text-align: left; }
.bap-pc-logo img { width: 40px; height: 40px; object-fit: contain; }
.bap-pc-face { width: 62px; height: 62px; border-radius: 50%; overflow: hidden; border: 2px solid var(--line); background: #dfe9f4; display: grid; place-items: center; flex: none; }
.bap-pc-face img { width: 100%; height: 100%; object-fit: cover; }
.bap-pc-face .bap-mono { font-size: 16px; }
.bap-pc-id { min-width: 0; }
.bap-pc-name { display: block; font-family: "Oswald", sans-serif; font-weight: 700; font-size: 21px; line-height: 1.1; }
.bap-pc-note { display: block; font-size: 12px; color: var(--text-faint); font-style: italic; margin-top: 2px; }
.bap-pc-hint { font-size: 12px; color: var(--text-dim); margin: 12px 0 8px; }
.bap-pc-hint b { color: var(--gold, #ffd166); }
.bap-pc-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 6px; }   /* minmax(0,·): long labels (REBOUND CONTROL) can never push the grid past the card */   /* both rows identical height, whatever wraps */
  .bap-pc-stats { gap: 4px; }
  .bap-stat-chip .scv { font-size: 19px; }
  .bap-stat-chip .sck { font-size: 7.5px; letter-spacing: .2px; min-height: 26px; }   /* two emoji-height lines — keeps BOTH rows identical */
.bap-stat-chip { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 1px; padding: 9px 4px 7px;
  background: var(--surface); border: 2px solid var(--line); border-radius: 12px; cursor: pointer; color: var(--text); font-family: "Inter", sans-serif; transition: border-color .15s, transform .15s; }
.bap-stat-chip:hover { border-color: var(--gold, #ffd166); transform: translateY(-2px); }
.bap-stat-chip .scv { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 24px; line-height: 1; }
.bap-stat-chip .sck { font-size: 10px; letter-spacing: .4px; text-transform: uppercase; color: var(--text-dim); overflow-wrap: break-word; max-width: 100%;
  min-height: 28px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; text-align: center; line-height: 1.15; }
.bap-stat-chip .sck i { font-style: normal; font-size: 12px; line-height: 1; }   /* emoji on its own fixed line — labels fit one line, chips stay identical */
.bap-stat-chip.best { border-color: rgba(255, 209, 102, .65); background: rgba(255, 209, 102, .08); }
.bap-stat-chip.best .scv { color: var(--gold, #ffd166); }
.bap-stat-chip.taken { opacity: .38; cursor: not-allowed; }
.bap-stat-chip.taken:hover { border-color: var(--line); transform: none; }
.bap-stat-chip .scl { position: absolute; top: 4px; right: 6px; font-size: 8px; letter-spacing: .8px; text-transform: uppercase; color: var(--text-faint); }
.bap-reelcard { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 16px 32px; text-align: center;
  min-height: 0; height: 100%; overflow-y: auto; scrollbar-gutter: stable;
  display: flex; flex-direction: column; justify-content: flex-start; }
.bap-reelcard > * { flex: none; }
.bap-reellabel { font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-dim); margin-bottom: 3px; }
.bap-reellabel b { color: var(--gold, #ffd166); }
.bap-reelblurb { font-size: 12px; color: var(--text-faint); margin-bottom: 12px; }
.bap-reelrow { display: flex; gap: 12px; max-width: 500px; width: 100%; margin: 10px auto 14px; align-self: center; }
.bap-teamwin { position: relative; width: 150px; flex: none; height: 150px; overflow: hidden; border: 2px solid var(--line); border-radius: 14px; background: rgba(0, 0, 0, .28); }
.bap-teamwin.land { border-color: var(--gold, #ffd166); animation: bapland .45s ease; }
.bap-teamwin .placeholder { color: var(--text-faint); font-size: 30px; }
.bap-reelwindow { position: relative; flex: 1; height: 150px; overflow: hidden; border: 2px solid var(--gold, #ffd166); border-radius: 14px; background: rgba(0, 0, 0, .28); }
.bap-reelwindow::before, .bap-reelwindow::after { content: ""; position: absolute; left: 0; right: 0; height: 32px; z-index: 2; pointer-events: none; }
.bap-reelwindow::before { top: 0; background: linear-gradient(180deg, rgba(7, 13, 21, .85), transparent); }
.bap-reelwindow::after { bottom: 0; background: linear-gradient(0deg, rgba(7, 13, 21, .85), transparent); }
.bap-reel { will-change: transform; }
.bap-reel-loop { animation: bapreelloop .45s linear infinite; }
.bap-reel-idle { animation: bapreelloop 22s linear infinite; }   /* attract-mode drift before the pull */
@keyframes bapreelloop { to { transform: translateY(-1800px); } }   /* 12 cells × 150px */
.bap-teamwin.fast .bap-reel, .bap-reelwindow.fast .bap-reel { filter: blur(2px); }
.bap-cell { height: 150px; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 0 12px; text-align: left; }
.bap-cell .cbody { flex: 0 1 210px; min-width: 0; }
.bap-cell .cph { flex: none; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; border: 2px solid var(--line); background: #dfe9f4; position: relative; }
.bap-cell .cph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
.bap-cell .cbody { min-width: 0; }
.bap-cell .nm { font-family: "Oswald", sans-serif; font-weight: 700; font-size: clamp(16px, 4.4vw, 24px); line-height: 1.08; }   /* wraps — full names always visible */
.bap-cell .rt { font-size: 12.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bap-cell .rt b { color: var(--gold, #ffd166); font-size: 15px; }
.bap-cell .placeholder { color: var(--text-faint); font-size: 26px; letter-spacing: 6px; width: 100%; text-align: center; }
.bap-reelwindow.land { animation: bapland .45s ease; }
  .bap-mono small { display: none; }
.bap-face { position: relative; display: block; width: 100%; height: 100%; }
.bap-face > .bap-mono { position: absolute; inset: 0; width: 100%; height: 100%; }
.bap-face > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bap-face > img.ld { background: #dfe9f4; }   /* opaque backing only AFTER load (mugs are transparent) — before load it painted WHITE BOXES over the monograms */
.bap-cell .cph img.fe { transform: scale(1.28); }

/* 1v1 arrangement of the solo pieces */
.b1-rig { display: flex; gap: 14px; align-items: center; justify-content: center; margin: 8px 0 12px; }
.b1-rig .bap-reelwindow { position: relative; width: min(340px, 58vw); height: 150px; overflow: hidden;
  border: 2px solid var(--line, rgba(255,255,255,.14)); border-radius: 14px; background: rgba(0,0,0,.28); }
.b1-card { background: var(--surface, #122130); border: 2px solid var(--line, rgba(255,255,255,.12));
  border-radius: 16px; padding: 14px; margin: 0 0 12px; transition: border-color .2s, box-shadow .2s; }
.b1-card .bap-pc-stats { margin-top: 4px; }
.b1-turnwho { text-align: center; font-family: "Oswald", sans-serif; font-size: 13px; letter-spacing: .6px;
  color: var(--text-dim, #b9cbdd); margin: 0 0 8px; }
.b1-turnwho .b1-you { color: #e0a93a; }
.bap-stat-chip.b1-picked { border-color: #5fe39a !important; background: rgba(46,210,120,.14) !important; }
.bap-stat-chip.b1-picked .scv { color: #5fe39a; }
.b1-boards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
@media (max-width: 560px) {
  .b1-rig { gap: 8px; }
  /* window AND cell heights must agree — runReel measures the first cell to
     park the reel (Anthony: logo cut off / player+name off center on mobile) */
  .b1-rig .bap-teamwin { width: 96px; height: 108px; }
  .b1-rig .bap-reelwindow { height: 108px; }
  .b1-rig .bap-cell { height: 108px; }
  .b1-rig .bap-cell--logo img { height: 64px; width: 64px; }
  .bap-pc-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .b1-boards { grid-template-columns: 1fr 1fr; }
  /* the loop animation must match the mobile cell height (12 × 108) or the
     spinning headshots tear and stagger (Anthony, all sports) */
  @keyframes bapreelloop { to { transform: translateY(-1296px); } }
}

/* ---- solo SPIN / pass buttons + DNA chips (lifted) ---- */
.bap-cta { display: block; margin: 12px auto 0; min-width: 210px; padding: 14px 32px; border: none; border-radius: 14px; cursor: pointer;
  font-family: "Oswald", sans-serif; font-weight: 700; font-size: 18px; letter-spacing: 1.5px; text-transform: uppercase;
  color: #1a1206; background: linear-gradient(180deg, #ffd166, #e0a93a); box-shadow: 0 6px 22px rgba(224, 169, 58, .35); transition: transform .12s, filter .12s; }
.bap-cta:hover { transform: translateY(-1px); filter: brightness(1.05); }
.bap-cta:disabled { opacity: .45; cursor: default; transform: none; box-shadow: none; }
.bap-pass { margin-top: 10px; width: 100%; padding: 9px; border-radius: 10px; border: 1px solid var(--line, rgba(255,255,255,.14)); background: none; color: var(--text-dim, #b9cbdd); font: inherit; font-size: 13px; cursor: pointer; }
.bap-pass:hover { border-color: #e58a8a; color: var(--text, #eef4fb); }
.bap-dna { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin-top: 10px; }
.bap-dnachip { display: block; width: 54px; text-align: center; }
.bap-dnachip .ph { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; margin: 0 auto; overflow: hidden; border: 1.5px solid rgba(255, 209, 102, .55); background: #dfe9f4; position: relative; }
.bap-dnachip .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bap-dnachip .ph .bap-mono { font-size: 12px; }
.bap-dnachip .ph .bap-mono small { display: none; }
.bap-dnachip .k { font-size: 9px; color: var(--text-faint, #7d90a5); text-transform: uppercase; letter-spacing: .4px; margin-top: 3px; display: block; line-height: 1.2; }
.bap-dnachip .k b { color: var(--gold, #ffd166); font-size: 10.5px; }
.b1-dna-open .ph { border-style: dashed; border-color: var(--line, rgba(255,255,255,.2)); opacity: .55; }

/* ---- the two builds: sil on the LEFT, trait list with donor faces on the
   right (Anthony's mock — no scrolling past two tall sils to read the picks) ---- */
.b1-sils { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.b1-silpanel { background: var(--surface, #122130); border: 1px solid var(--line, rgba(255,255,255,.12)); border-radius: 14px; padding: 10px 10px 12px; text-align: center; }
.b1-silpanel.b1-sp-me { border-color: rgba(255,107,107,.5); }
.b1-silpanel.b1-sp-opp { border-color: rgba(88,166,255,.45); }
.b1-sp-me .b1-col-h, .b1-sp-me .b1-col-h.b1-you { color: #ff6b6b; }
.b1-sp-opp .b1-col-h { color: #58a6ff; }
.b1-sp-body { display: flex; align-items: center; gap: 8px; }
.b1-sp-body .b1-silbox { flex: none; width: 86px; height: 128px; margin: 0; }
.b1-trlist { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.b1-tr-row { display: grid; grid-template-columns: 1fr auto 74px; align-items: center; gap: 6px;
  padding: 2.5px 4px; border-radius: 7px; text-align: left; }
.b1-tr-row:nth-child(odd) { background: rgba(255,255,255,.03); }
.b1-tr-l { font-size: 9px; letter-spacing: .4px; text-transform: uppercase; color: var(--text-faint, #7d90a5);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b1-tr-v { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 13px; color: var(--gold, #ffd166); min-width: 20px; text-align: right; }
.b1-tr-open .b1-tr-v { color: var(--text-faint, #7d90a5); font-weight: 400; }
.b1-tr-d { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.b1-tr-d .ph { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; overflow: hidden;
  border: 1px solid rgba(255,209,102,.5); background: #dfe9f4; flex: none; }
.b1-tr-d .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.b1-tr-d .ph .bap-mono { font-size: 9px; }
.b1-tr-d .ph .bap-mono small { display: none; }
.b1-tr-d i { font-style: normal; font-size: 9.5px; color: var(--text-dim, #b9cbdd);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b1-tr-open .ph { border-style: dashed; border-color: var(--line, rgba(255,255,255,.2)); opacity: .5; }
.b1-silbox { position: relative; height: 168px; margin: 4px auto; }
.b1-silbox .b1-silwrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 100%; aspect-ratio: 674 / 877; }
.b1-silbox.b1-pos-def .b1-silwrap { aspect-ratio: 900 / 1005; }
.b1-silbox.b1-pos-gol .b1-silwrap { aspect-ratio: 795 / 911; }
.b1-silwrap img, .b1-silwrap .b1-fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.b1-silwrap .b1-ghost { opacity: .3; filter: invert(.86); }
:root[data-theme="light"] .b1-silwrap .b1-ghost { filter: none; opacity: .13; }
.b1-silwrap .b1-fill { background: linear-gradient(180deg, var(--fillc1, #ffd166), var(--fillc2, #b8860b));
  clip-path: inset(100% 0 0 0); transition: clip-path .7s cubic-bezier(.3, .8, .3, 1), background .6s ease; }
.b1-pos-fwd .b1-fill { -webkit-mask: url("/build-a-player/nhl/fwd-sil-mask.png?v=1") center / contain no-repeat; mask: url("/build-a-player/nhl/fwd-sil-mask.png?v=1") center / contain no-repeat; }
.b1-pos-def .b1-fill { -webkit-mask: url("/build-a-player/nhl/def-sil-mask.png?v=1") center / contain no-repeat; mask: url("/build-a-player/nhl/def-sil-mask.png?v=1") center / contain no-repeat; }
.b1-pos-gol .b1-fill { -webkit-mask: url("/build-a-player/nhl/gol-sil-mask.png?v=1") center / contain no-repeat; mask: url("/build-a-player/nhl/gol-sil-mask.png?v=1") center / contain no-repeat; }
.b1-silwrap.b1-glow .b1-fill { filter: drop-shadow(0 0 12px var(--silglow, rgba(255, 209, 102, .4))); }
.b1-avg { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 15px; color: var(--gold, #ffd166); }

/* ---- the battle ---- */
.b1-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; max-width: 520px; margin: 10px auto 4px; }
.b1-vs-side { background: var(--surface, #122130); border: 1px solid var(--line, rgba(255,255,255,.12)); border-radius: 14px; padding: 12px 10px; text-align: center; }
.b1-vs-side.b1-lead { border-color: rgba(95, 227, 154, .6); box-shadow: 0 0 16px rgba(46, 210, 120, .18); }
.b1-vs-name { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 15px; letter-spacing: .4px; }
.b1-vs-line { font-family: "Oswald", sans-serif; font-size: 20px; margin-top: 3px; }
.b1-vs-x { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 26px; color: var(--text-faint, #7d90a5); }
.b1-vs-ovr { font-size: 11px; color: var(--text-dim, #b9cbdd); margin-top: 2px; }
.b1-gm { text-align: center; font-family: "Oswald", sans-serif; letter-spacing: 1px; font-size: 12px; color: var(--text-dim, #b9cbdd); margin: 10px 0 4px; }
.b1-verdict { animation: b1slam .5s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes b1slam { 0% { transform: scale(2.2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.b1-zonecmp { max-width: 500px; margin: 14px auto 6px; text-align: left; }
.b1-zc-h { font-family: "Oswald", sans-serif; font-size: 12px; letter-spacing: 1px; color: var(--text-faint, #7d90a5); text-align: center; margin-bottom: 4px; }
.b1-zc-names { display: flex; justify-content: space-between; font-family: "Oswald", sans-serif;
  font-size: 12.5px; letter-spacing: .8px; margin-bottom: 5px; padding: 0 2px; }
.b1-zc-nme { color: #ff6b6b; } .b1-zc-nopp { color: #58a6ff; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* symmetric: [team A → | centered attribute | ← team B] (Anthony: "show the
   attributes in the middle ... so it separates each team evenly") */
.b1-zc-row { display: grid; grid-template-columns: 1fr minmax(120px, 210px) 1fr; gap: 10px; align-items: center; padding: 3px 0; font-size: 13px; }
.b1-zc-side { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
.b1-zc-side .v { min-width: 40px; }
.b1-zc-rt { justify-content: flex-start; }
.b1-zc-mid { display: flex; flex-direction: column; align-items: center; }
.b1-zc-bar { width: 100%; display: block; }
.b1-zc-ph { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; overflow: hidden;
  border: 1px solid var(--line, rgba(255,255,255,.25)); background: #dfe9f4; flex: none; }
.b1-zc-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.b1-zc-ph .bap-mono { font-size: 10px; }
.b1-zc-ph .bap-mono small { display: none; }
.b1-zc-mid { min-width: 0; }
.b1-zc-row .v { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 15px; text-align: center; border-radius: 8px; padding: 2px 0; }
.b1-zc-row .v.w { color: #5fe39a; background: rgba(46, 210, 120, .12); }
.b1-zc-row .v.l { color: #ff9d9d; opacity: .8; }
.b1-zc-row .v.t { color: var(--text-dim, #b9cbdd); }
.b1-zc-lab { text-align: center; color: var(--text-dim, #b9cbdd); font-size: 11.5px; }
.b1-zc-bar { position: relative; height: 4px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.b1-zc-bar i { position: absolute; inset: 0; transform-origin: left; background: linear-gradient(90deg, #5fe39a, #2fa8ef); }
@media (max-width: 560px) {
  .b1-sils { gap: 8px; } .b1-silbox { height: 128px; }
  .bap-dnachip { width: 44px; } .bap-dnachip .ph { width: 32px; height: 32px; }
}
.bap-stat-chip.b1-gone { opacity: .32; }
.bap-stat-chip.b1-gone .scv { text-decoration: line-through; color: #ff9d9d; }
.bap-stat-chip.b1-gone .scl { color: #ff9d9d; }
/* NFL + NBA silhouettes */
.b1-silbox.b1-pos-qb .b1-silwrap, .b1-silbox.b1-pos-goat .b1-silwrap { aspect-ratio: 478 / 647; }
.b1-silbox.b1-pos-rb .b1-silwrap { aspect-ratio: 505 / 647; }
.b1-silbox.b1-pos-wr .b1-silwrap { aspect-ratio: 597 / 647; }
.b1-pos-qb .b1-fill { -webkit-mask: url("/build-a-player/nfl/qb-sil-mask.png?v=1") center / contain no-repeat; mask: url("/build-a-player/nfl/qb-sil-mask.png?v=1") center / contain no-repeat; }
.b1-pos-rb .b1-fill { -webkit-mask: url("/build-a-player/nfl/rb-sil-mask.png?v=1") center / contain no-repeat; mask: url("/build-a-player/nfl/rb-sil-mask.png?v=1") center / contain no-repeat; }
.b1-pos-wr .b1-fill { -webkit-mask: url("/build-a-player/nfl/wr-sil-mask.png?v=1") center / contain no-repeat; mask: url("/build-a-player/nfl/wr-sil-mask.png?v=1") center / contain no-repeat; }
.b1-pos-goat .b1-fill { -webkit-mask: url("/build-a-player/nba/nba-sil-mask.png?v=1") center / contain no-repeat; mask: url("/build-a-player/nba/nba-sil-mask.png?v=1") center / contain no-repeat; }

/* ---------- hub rankings board v2 (combined Elo · position records · placement) ---------- */
.b1-tabs { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 2px 0 12px; }
.b1-tab { font-family: "Oswald", sans-serif; font-weight: 600; font-size: 12.5px; letter-spacing: .6px;
  padding: 6px 14px; border-radius: 999px; cursor: pointer; color: var(--text-dim, #b9cbdd);
  background: none; border: 1px solid var(--line, rgba(255,255,255,.14)); }
.b1-tab.on { color: #241a05; background: linear-gradient(135deg, #f0c04e, #cf962f); border-color: transparent; }
.b1-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.b1-tbl th { font-family: "Oswald", sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .8px;
  color: var(--text-faint, #7d90a5); text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--line, rgba(255,255,255,.12)); }
.b1-tbl td { padding: 7px 8px; border-bottom: 1px solid var(--line, rgba(255,255,255,.07)); }
.b1-tbl .r { text-align: right; }
.b1-qual-note { color: var(--text-faint, #7d90a5); font-size: 12px; text-align: center; margin: 10px 0 0; }
.b1-mecard { background: linear-gradient(135deg, rgba(224,169,58,.12), rgba(10,18,28,.3));
  border: 1px solid rgba(224,169,58,.45); border-radius: 14px; padding: 13px 15px; margin: 0 0 14px; text-align: center; }
.b1-mc-h { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 1.4px; color: #e0a93a; }
.b1-mc-rank { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 34px; line-height: 1.1; color: var(--text, #eef4fb); }
.b1-mc-elo { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 19px; color: #e0a93a; margin-top: 2px; }
.b1-mc-elo span { font-size: 11px; letter-spacing: 1px; color: var(--text-faint, #7d90a5); }
.b1-mc-elo em { font-style: normal; font-size: 11px; letter-spacing: .6px; color: var(--text-faint, #7d90a5);
  border: 1px solid var(--line, rgba(255,255,255,.14)); border-radius: 999px; padding: 2px 8px; vertical-align: 2px; margin-left: 6px; }
.b1-mc-line { color: var(--text-dim, #b9cbdd); font-size: 13px; margin-top: 3px; }
.b1-around { display: flex; gap: 7px; justify-content: center; align-items: center; flex-wrap: wrap;
  font-size: 12px; color: var(--text-faint, #7d90a5); margin-top: 9px; }
.b1-around i { font-style: normal; opacity: .5; }
.b1-around b { color: var(--text-dim, #b9cbdd); font-weight: 600; }
.b1-around .b1-ar-me { color: #e0a93a; font-weight: 700; }
.b1-around .b1-ar-me b { color: #e0a93a; }
.b1-posrec { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  font-size: 12px; color: var(--text-faint, #7d90a5); margin-top: 9px; padding-top: 8px;
  border-top: 1px solid var(--line, rgba(255,255,255,.08)); }
.b1-posrec b { color: var(--text-dim, #b9cbdd); font-weight: 600; }
.b1-placebar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); margin: 8px auto 0; max-width: 240px; overflow: hidden; }
.b1-placebar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #cf962f, #f0c04e); transition: width .5s ease; }
.b1-place { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 1px; color: #e0a93a; margin-top: 12px; }
.b1-place-done { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 19px; letter-spacing: 1.6px;
  color: #e0a93a; margin: 12px 0 2px; text-shadow: 0 0 22px rgba(224,169,58,.5); }
.b1-rankline { font-family: "Oswald", sans-serif; font-size: 15px; color: var(--text-dim, #b9cbdd); margin-top: 6px; }
.b1-rankline b { color: var(--text, #eef4fb); font-size: 19px; }
.b1-mm .b1-around { margin-top: 7px; }
.b1-mm .b1-place, .b1-mm .b1-placebar { margin-left: auto; margin-right: auto; }
/* mode buttons: two-line labels (RANKED · Elo on the line / FRIEND · no Elo) */
.b1-btn small { display: block; font-family: Inter, system-ui, sans-serif; font-weight: 500; font-size: 10.5px;
  letter-spacing: .3px; opacity: .75; margin-top: 1px; }

/* ---------- mobile reel rig — pair with the 108px window/cell block above;
   runReel parks by MEASURED cell height, so keep window == cell ---------- */
@media (max-width: 560px) {
  #b1Root .b1-rig .bap-reelwindow { width: auto; flex: 1 1 auto; min-width: 0; }
  #b1Root .bap-cell { gap: 10px; padding: 0 8px; }
  #b1Root .bap-cell .cph { width: 72px; height: 72px; }
  #b1Root .bap-cell .cbody { flex: 0 1 auto; }
  #b1Root .bap-cell .nm { font-size: clamp(15px, 4.2vw, 19px); }
  .b1-sils { grid-template-columns: 1fr; }
  .b1-sp-body .b1-silbox { width: 96px; height: 140px; }
}

/* standings row → inline per-position records */
tr.b1-rowbtn { cursor: pointer; }
tr.b1-rowbtn:hover td { background: rgba(255,255,255,.03); }
tr.b1-rowon td { background: rgba(224,169,58,.07); }
tr.b1-exp td { padding: 4px 8px 10px; }
.b1-exprec { margin-top: 2px; padding-top: 0; border-top: none; justify-content: flex-start; }


/* your own row on the rankings, unmistakable (Anthony) */
tr.b1-merow td { background: rgba(224,169,58,.14) !important; font-weight: 600; }
tr.b1-merow td:first-child { box-shadow: inset 3px 0 0 #e0a93a; }