/* Broken Champions — shared top bar + information-card menu. Same on every page. Built 2026-10-14.
   All classes are bc- prefixed so they never clash with a page's own styles. */
.bc-top,.bc-top *,.bc-top *::before,.bc-top *::after{box-sizing:border-box}
.bc-top{font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;--bc-gut:clamp(16px,3vw,48px);--bc-gold:#ffcf5a;--bc-orange:#fb923c;--bc-cyan:#6fe6ff;--bc-line:rgba(255,255,255,.1);--bc-panel2:#121a26;--bc-mut:#a3aebb;line-height:1.3;color:#edf1f6;flex:none;width:100%}
.bc-top a{text-decoration:none}
.bc-top :focus-visible{outline:3px solid var(--bc-gold);outline-offset:3px;border-radius:6px}
/* ===== top bar (identical on every page) ===== */
.bc-top{position:relative;z-index:1000;display:flex;align-items:center;gap:.7rem;padding:.55rem var(--bc-gut);
  background:rgba(7,7,9,.84);backdrop-filter:blur(12px);border-bottom:1px solid var(--bc-line)}
.bc-brand{display:flex;align-items:center;gap:.6rem;margin-right:auto;min-width:0;text-decoration:none}
.bc-badge{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,207,90,.7);
  box-shadow:0 0 14px rgba(255,138,42,.55)}
.bc-brand b{font-size:.92rem;font-weight:900;letter-spacing:.16em;white-space:nowrap;color:#fff}
.bc-brand b span{color:var(--bc-gold)}
.bc-quick{display:none;gap:1.2rem;margin-right:.6rem}
.bc-quick a{font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:#cfd8e3;padding:.4rem 0;border-bottom:2px solid transparent}
.bc-quick a:hover,.bc-quick a[aria-current="page"]{color:#fff;border-color:var(--bc-gold)}
.bc-quick a.bc-help{color:var(--bc-cyan)}
@media(min-width:1180px){.bc-quick{display:flex}}
.bc-btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border:0;cursor:pointer;font:800 .78rem/1 Inter,sans-serif;
  letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:.72rem 1.1rem;white-space:nowrap;text-decoration:none;min-height:40px}
.bc-donate{background:linear-gradient(135deg,var(--bc-gold),var(--bc-orange));color:#160a00;box-shadow:0 0 22px rgba(255,170,60,.35)}
.bc-ghost{background:transparent;color:var(--bc-cyan);border:1.5px solid var(--bc-cyan)}
.bc-menu-btn{background:var(--bc-panel2);color:#fff;border:1px solid var(--bc-line)}
.bc-menu-btn:hover{border-color:var(--bc-cyan)}
.bc-burger{width:16px;height:12px;position:relative;display:inline-block}
.bc-burger i{position:absolute;left:0;right:0;height:2px;background:currentColor;border-radius:2px;transition:.25s}
.bc-burger i:nth-child(1){top:0}.bc-burger i:nth-child(2){top:5px}.bc-burger i:nth-child(3){top:10px}
.bc-open .bc-burger i:nth-child(1){top:5px;transform:rotate(45deg)}
.bc-open .bc-burger i:nth-child(2){opacity:0}
.bc-open .bc-burger i:nth-child(3){top:5px;transform:rotate(-45deg)}

/* ===== pull-down menu: information cards ===== */
.bc-drop{position:absolute;left:0;right:0;top:100%;z-index:25;background:rgba(8,11,17,.985);backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,207,90,.35);box-shadow:0 30px 60px rgba(0,0,0,.65);
  transform:translateY(-12px);opacity:0;visibility:hidden;transition:.28s ease;max-height:calc(var(--bc-vh,100dvh) - 60px);overflow:auto;overscroll-behavior:contain}
.bc-drop.bc-show{transform:none;opacity:1;visibility:visible}
.bc-drop-in{max-width:1380px;margin:0 auto;padding:1rem var(--bc-gut) 1.3rem}
.bc-drop-tip{font-size:.74rem;color:var(--bc-mut);margin:0 0 .8rem}
.bc-groups{display:grid;gap:1rem 1.2rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.bc-grp h4{margin:0 0 .5rem;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bc-gold);display:flex;align-items:center;gap:.4rem}
.bc-grp h4::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(255,207,90,.4),transparent)}
.bc-mcard{display:grid;grid-template-columns:48px 1fr;gap:.65rem;align-items:center;padding:.45rem .5rem;border-radius:10px;text-decoration:none;
  border:1px solid transparent;transition:background .2s,border-color .2s,transform .2s}
.bc-mcard+.bc-mcard{margin-top:.15rem}
.bc-mcard:hover{background:var(--bc-panel2);border-color:rgba(255,207,90,.3);transform:translateX(3px)}
.bc-mcard[aria-current="page"]{background:rgba(255,207,90,.08);border-color:rgba(255,207,90,.45)}
.bc-mthumb{width:48px;height:48px;border-radius:9px;background-size:cover;background-position:center;border:1px solid var(--bc-line)}
.bc-mcard b{display:block;font-size:.9rem;font-weight:800;color:#fff;line-height:1.2}
.bc-mcard span{display:block;font-size:.74rem;color:#aab5c2;line-height:1.35;margin-top:.12rem}
.bc-mcard small{font-size:.58rem;color:var(--bc-orange);font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-left:.3rem}
@media(max-width:600px){.bc-groups{grid-template-columns:1fr}.bc-mthumb{width:40px;height:40px}.bc-mcard{grid-template-columns:40px 1fr}}


.bc-art-embers{background:radial-gradient(45% 55% at 30% 85%,rgba(255,90,31,.8),transparent 70%),radial-gradient(35% 40% at 75% 30%,rgba(255,207,90,.45),transparent 70%),#140806}
.bc-art-dawn{background:radial-gradient(70% 45% at 50% 108%,rgba(255,160,60,.85),transparent 70%),linear-gradient(180deg,#0b1626 0%,#2a1736 55%,#4a2010 100%)}
.bc-art-grid{background:radial-gradient(60% 60% at 70% 20%,rgba(111,230,255,.35),transparent 70%),repeating-linear-gradient(0deg,rgba(111,230,255,.12) 0 1px,transparent 1px 10px),repeating-linear-gradient(90deg,rgba(111,230,255,.12) 0 1px,transparent 1px 10px),#07101a}
.bc-art-chains{background:radial-gradient(50% 60% at 20% 30%,rgba(59,130,246,.4),transparent 70%),repeating-radial-gradient(circle at 0 0,transparent 0 6px,rgba(255,207,90,.25) 7px 8px,transparent 9px 14px),#0a0c12}
@media(max-width:760px){.bc-brand b{font-size:.74rem;letter-spacing:.1em}.bc-menu-btn .bc-lbl{display:none}.bc-top .bc-donate{padding:.62rem .85rem}}
@media(prefers-reduced-motion:reduce){.bc-top *{transition:none!important}}
.bc-top.bc-fixed{position:fixed;top:0;left:0;right:0}
html.bc-wide body{background:radial-gradient(40% 70% at 0% 50%,rgba(255,90,31,.22),transparent 70%),radial-gradient(40% 70% at 100% 50%,rgba(59,130,246,.22),transparent 70%),#070709}
html.bc-wide .shell{box-shadow:0 0 120px rgba(0,0,0,.6)}