/* ============================================================
   百博体育 · 共享站点样式 /assets/site.css
   热带竞技数据舱 · 直角细线 · 深海蓝 × 珊瑚橙
   ============================================================ */

:root{
  --bb-deep:#052B3B;
  --bb-trench:#0A4A63;
  --bb-coral:#FF6B35;
  --bb-coral-hot:#FF8A5B;
  --bb-green:#00C48C;
  --bb-sand:#F6F1E7;
  --bb-mist:#DCE8EA;
  --bb-ink:#081418;
  --bb-yellow:#FFD166;
  --bb-foam:#BFE3E8;

  --bb-font-display:"Barlow Condensed","Oswald","Arial Narrow",Arial,sans-serif;
  --bb-font-zh:"Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --bb-font-mono:"IBM Plex Mono","JetBrains Mono",Consolas,"Courier New",monospace;

  --bb-max:1360px;
  --bb-gutter:clamp(18px,4.2vw,60px);
  --bb-header-h:98px;
  --bb-radius:2px;
  --bb-line:rgba(8,20,24,.14);
  --bb-line-light:rgba(191,227,232,.2);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--bb-font-zh);
  font-size:17px;
  line-height:1.7;
  color:var(--bb-ink);
  background:var(--bb-sand);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4,h5,p,figure,blockquote,ul,ol,dl{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3,h4{font-family:var(--bb-font-zh);font-weight:900;line-height:1.16;letter-spacing:-.01em}
a{color:inherit}
img,svg,video{display:block;max-width:100%}
button{font:inherit;color:inherit}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--bb-yellow);outline-offset:3px}
::selection{background:var(--bb-coral);color:#fff}
#main-content{scroll-margin-top:calc(var(--bb-header-h) + 8px)}

/* ---------- 通用容器与节奏 ---------- */
.bb-container{width:100%;max-width:var(--bb-max);margin:0 auto;padding-inline:var(--bb-gutter)}
.bb-section{padding-block:clamp(48px,7vw,96px)}
.bb-rule{height:1px;border:0;margin:0;background:var(--bb-line)}
.bb-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--bb-font-mono);font-size:11.5px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--bb-trench);
}
.bb-eyebrow::before{content:"";width:26px;height:2px;background:var(--bb-coral);flex:0 0 auto}
.bb-eyebrow--light{color:var(--bb-foam)}
.bb-display{
  font-family:var(--bb-font-display);font-weight:200;text-transform:uppercase;
  font-size:clamp(3rem,8vw,7rem);line-height:.92;letter-spacing:-.01em;
}
.bb-lead{font-size:clamp(16px,1.35vw,18px);line-height:1.78;color:rgba(8,20,24,.78);max-width:60ch}
.bb-num{font-family:var(--bb-font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.bb-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}

/* ---------- 面包屑 ---------- */
.bb-breadcrumb{font-family:var(--bb-font-mono);font-size:12px;letter-spacing:.08em;color:rgba(8,20,24,.55)}
.bb-breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.bb-breadcrumb li{display:inline-flex;align-items:center}
.bb-breadcrumb li + li::before{content:"/";margin-right:8px;color:rgba(8,20,24,.32)}
.bb-breadcrumb a{color:inherit;text-decoration:none;transition:color .18s ease}
.bb-breadcrumb a:hover{color:var(--bb-coral)}
.bb-breadcrumb [aria-current="page"]{color:var(--bb-ink)}

/* ---------- 标签 / 筛选 ---------- */
.bb-tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 13px;border:1px solid var(--bb-line);border-radius:999px;
  background:transparent;color:var(--bb-ink);
  font-family:var(--bb-font-zh);font-size:13px;letter-spacing:.02em;
  cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.bb-tag:hover{border-color:var(--bb-coral);color:var(--bb-coral)}
.bb-tag[aria-pressed="true"],.bb-tag.is-active{background:var(--bb-deep);border-color:var(--bb-deep);color:var(--bb-sand)}
.bb-tag[aria-pressed="true"]:hover,.bb-tag.is-active:hover{background:var(--bb-trench);color:#fff}

/* ---------- 按钮 ---------- */
.bb-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border:1px solid transparent;border-radius:var(--bb-radius);
  font-family:var(--bb-font-zh);font-size:14px;font-weight:700;letter-spacing:.06em;
  text-decoration:none;cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.bb-btn--coral{background:var(--bb-coral);color:var(--bb-deep);border-color:var(--bb-coral)}
.bb-btn--coral:hover{background:var(--bb-coral-hot);border-color:var(--bb-coral-hot);transform:translateY(-1px)}
.bb-btn--green{background:var(--bb-green);color:var(--bb-deep);border-color:var(--bb-green)}
.bb-btn--green:hover{background:#12d99e;border-color:#12d99e;transform:translateY(-1px)}
.bb-btn--ghost{background:transparent;border-color:rgba(191,227,232,.42);color:var(--bb-foam)}
.bb-btn--ghost:hover{background:rgba(191,227,232,.12);border-color:var(--bb-foam);color:#fff}
.bb-btn--sm{padding:7px 14px;font-size:12.5px;letter-spacing:.08em}
.bb-btn--block{display:flex;width:100%}
.bb-btn:active{transform:translateY(0)}

/* ============================================================
   头部
   ============================================================ */
.bb-skip{
  position:fixed;left:14px;top:-72px;z-index:500;
  padding:10px 18px;background:var(--bb-yellow);color:var(--bb-ink);
  font-size:14px;font-weight:700;text-decoration:none;border-radius:var(--bb-radius);
  transition:top .2s ease;
}
.bb-skip:focus{top:12px}

.bb-header{
  position:sticky;top:0;z-index:100;
  color:var(--bb-sand);
  background:linear-gradient(180deg,rgba(5,43,59,.96) 0%,rgba(5,43,59,.84) 56%,rgba(5,43,59,0) 100%);
  transition:background .3s ease,box-shadow .3s ease;
}
.bb-header[data-scrolled]{
  background:var(--bb-deep);
  box-shadow:0 1px 0 rgba(191,227,232,.18),0 16px 34px -26px rgba(3,16,22,.95);
}

/* 顶部仪表条 */
.bb-topline{
  overflow:hidden;max-height:36px;opacity:1;
  border-bottom:1px solid rgba(191,227,232,.14);
  background:rgba(3,22,30,.34);
  transition:max-height .3s ease,opacity .22s ease;
}
.bb-header[data-scrolled] .bb-topline{max-height:0;opacity:0;border-bottom-color:transparent}
.bb-topline__inner{
  max-width:var(--bb-max);margin:0 auto;padding:0 var(--bb-gutter);
  min-height:35px;display:flex;align-items:center;gap:14px;
  font-family:var(--bb-font-mono);font-size:11px;font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;color:var(--bb-foam);
}
.bb-topline__edition{color:var(--bb-coral);font-weight:600;white-space:nowrap}
.bb-topline__dot{
  width:5px;height:5px;flex:0 0 auto;background:var(--bb-green);border-radius:50%;
  box-shadow:0 0 0 3px rgba(0,196,140,.18);
}
.bb-topline__note{color:rgba(220,232,234,.86);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bb-topline__meter{
  flex:1 1 auto;max-width:220px;height:3px;margin-left:auto;
  background:rgba(191,227,232,.18);overflow:hidden;
}
.bb-topline__meter i{display:block;height:100%;width:64%;background:linear-gradient(90deg,var(--bb-coral),var(--bb-yellow))}

/* 品牌行 */
.bb-header__bar{
  max-width:var(--bb-max);margin:0 auto;padding:0 var(--bb-gutter);
  min-height:64px;display:flex;align-items:center;gap:clamp(14px,2.4vw,40px);
}
.bb-brand{display:inline-flex;align-items:center;gap:12px;flex:0 0 auto;text-decoration:none;color:var(--bb-sand)}
.bb-brand__mark{
  position:relative;display:block;width:36px;height:36px;flex:0 0 auto;
  background:var(--bb-coral);overflow:hidden;
  transition:transform .25s ease;
}
.bb-brand__mark span{
  position:absolute;inset:0;
  background:
    linear-gradient(118deg,transparent 44%,var(--bb-deep) 44%,var(--bb-deep) 54%,transparent 54%),
    linear-gradient(118deg,transparent 64%,var(--bb-deep) 64%,var(--bb-deep) 74%,transparent 74%);
}
.bb-brand:hover .bb-brand__mark{transform:translateY(-2px)}
.bb-brand__text{display:flex;flex-direction:column;gap:1px;line-height:1.06}
.bb-brand__name{font-family:var(--bb-font-zh);font-size:17px;font-weight:900;letter-spacing:.14em;color:#fff}
.bb-brand__sub{
  font-family:var(--bb-font-display);font-size:10.5px;font-weight:400;
  letter-spacing:.3em;text-transform:uppercase;color:var(--bb-foam);
}

/* 导航 */
.bb-nav{margin-left:auto}
.bb-nav__list{display:flex;align-items:center;gap:clamp(10px,1.8vw,28px)}
.bb-nav__item{display:block}
.bb-nav__link{
  position:relative;display:inline-block;padding:8px 2px;
  font-size:14.5px;font-weight:500;letter-spacing:.04em;text-decoration:none;
  color:rgba(246,241,231,.82);transition:color .18s ease;white-space:nowrap;
}
.bb-nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;
  background:var(--bb-coral);transform:scaleX(0);transform-origin:left center;
  transition:transform .22s ease;
}
.bb-nav__link:hover,.bb-nav__link:focus-visible{color:#fff}
.bb-nav__link:hover::after,.bb-nav__link:focus-visible::after{transform:scaleX(1)}
.bb-nav__link[aria-current="page"]{color:var(--bb-coral);font-weight:700}
.bb-nav__link[aria-current="page"]::after{transform:scaleX(1);background:var(--bb-yellow)}
.bb-nav__foot{display:none}
.bb-nav__footnote{
  font-family:var(--bb-font-mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(191,227,232,.62);
}

.bb-header__actions{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.bb-header__cta{white-space:nowrap}

/* 汉堡按钮 */
.bb-navtoggle{
  display:none;align-items:center;gap:9px;
  padding:9px 12px;background:transparent;border:1px solid rgba(191,227,232,.34);
  border-radius:var(--bb-radius);color:var(--bb-sand);cursor:pointer;
  transition:border-color .2s ease,color .2s ease;
}
.bb-navtoggle:hover{border-color:var(--bb-coral);color:var(--bb-coral)}
.bb-navtoggle__bars{position:relative;display:block;width:18px;height:2px;background:currentColor;transition:background .2s ease}
.bb-navtoggle__bars i{position:absolute;left:0;width:18px;height:2px;background:currentColor;transition:transform .22s ease}
.bb-navtoggle__bars i:first-child{top:-6px}
.bb-navtoggle__bars i:last-child{top:6px}
.bb-navtoggle[aria-expanded="true"] .bb-navtoggle__bars{background:transparent}
.bb-navtoggle[aria-expanded="true"] .bb-navtoggle__bars i:first-child{transform:translateY(6px) rotate(45deg)}
.bb-navtoggle[aria-expanded="true"] .bb-navtoggle__bars i:last-child{transform:translateY(-6px) rotate(-45deg)}
.bb-navtoggle__label{font-family:var(--bb-font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase}

/* 遮罩（桌面隐藏） */
.bb-nav__scrim{display:none}

/* 滚动进度 */
.bb-progress{height:2px;background:rgba(191,227,232,.12);overflow:hidden}
.bb-progress__bar{
  display:block;height:100%;width:100%;
  background:linear-gradient(90deg,var(--bb-coral),var(--bb-yellow));
  transform:scaleX(0);transform-origin:left center;
  transition:transform .1s linear;
}

/* ============================================================
   页脚
   ============================================================ */
.bb-footer{position:relative;overflow:hidden;background:var(--bb-deep);color:var(--bb-mist)}
.bb-footer::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(191,227,232,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(191,227,232,.055) 1px,transparent 1px);
  background-size:72px 72px;
}
.bb-footer::after{
  content:"";position:absolute;right:-140px;top:-160px;width:440px;height:440px;
  pointer-events:none;
  background:radial-gradient(circle,rgba(255,107,53,.24),transparent 68%);
}
.bb-footer__stripe{
  position:relative;z-index:1;height:10px;
  background:linear-gradient(100deg,var(--bb-coral) 0 42%,var(--bb-yellow) 42% 54%,var(--bb-green) 54% 68%,var(--bb-trench) 68% 100%);
}
.bb-footer__inner{
  position:relative;z-index:1;
  max-width:var(--bb-max);margin:0 auto;
  padding:clamp(38px,6vw,76px) var(--bb-gutter) clamp(22px,3vw,34px);
}
.bb-footer__mast{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(30px,5vw,80px);
}
.bb-footer__brand{display:flex;flex-direction:column;gap:16px;min-width:0}
.bb-footer__name{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--bb-font-zh);font-size:20px;font-weight:900;letter-spacing:.14em;
  color:#fff;text-decoration:none;
}
.bb-footer__mark{
  display:grid;place-items:center;width:38px;height:38px;flex:0 0 auto;
  background:var(--bb-coral);color:var(--bb-deep);
  font-family:var(--bb-font-display);font-size:19px;font-weight:600;letter-spacing:.02em;
}
.bb-footer__note{font-size:14.5px;line-height:1.8;color:rgba(220,232,234,.8);max-width:36ch}
.bb-footer__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,40px)}
.bb-footer__col{min-width:0}
.bb-footer__title{
  margin-bottom:14px;padding-bottom:10px;
  border-bottom:1px solid rgba(191,227,232,.18);
  font-family:var(--bb-font-mono);font-size:11.5px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--bb-foam);
}
.bb-footer__list{display:grid;gap:9px}
.bb-footer__link{
  display:inline-block;font-size:14.5px;text-decoration:none;
  color:rgba(220,232,234,.82);
  transition:color .18s ease,transform .18s ease;
}
.bb-footer__link:hover,.bb-footer__link:focus-visible{color:var(--bb-coral);transform:translateX(3px)}

.bb-footer__contact{margin-top:4px}
.bb-contact-list{display:grid;gap:0;margin-top:4px}
.bb-contact{
  display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:10px;
  padding:9px 0;border-bottom:1px dashed rgba(191,227,232,.15);
  font-size:13.5px;line-height:1.6;
}
.bb-contact__key{
  font-family:var(--bb-font-mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bb-foam);
}
.bb-contact__val{color:rgba(246,241,231,.9);word-break:break-word}
.bb-copy{
  padding:4px 9px;border:1px solid rgba(0,196,140,.5);border-radius:var(--bb-radius);
  background:transparent;color:var(--bb-green);cursor:pointer;
  font-family:var(--bb-font-mono);font-size:10.5px;letter-spacing:.14em;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.bb-copy:hover{background:var(--bb-green);color:var(--bb-deep)}
.bb-copy[data-copied]{background:var(--bb-yellow);border-color:var(--bb-yellow);color:var(--bb-ink)}

.bb-footer__base{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px;margin-top:clamp(28px,4vw,54px);padding-top:18px;
  border-top:1px solid rgba(191,227,232,.16);
  font-family:var(--bb-font-mono);font-size:11.5px;letter-spacing:.08em;
  color:rgba(220,232,234,.62);
}
.bb-footer__legal{margin:0}
.bb-footer__reg{color:var(--bb-foam)}
.bb-footer__base-links{display:flex;flex-wrap:wrap;gap:6px 18px}
.bb-footer__base-links .bb-footer__link{
  font-family:var(--bb-font-mono);font-size:11.5px;letter-spacing:.08em;
  color:rgba(220,232,234,.62);
}

/* ============================================================
   通用媒体容器（页面阶段放图）
   ============================================================ */
.bb-media{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(150deg,var(--bb-trench) 0%,var(--bb-deep) 58%,#031a24 100%);
}
.bb-media img{
  position:relative;z-index:1;width:100%;height:100%;object-fit:cover;
}
.bb-media::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:radial-gradient(rgba(191,227,232,.3) 1px,transparent 1px);
  background-size:6px 6px;opacity:.42;mix-blend-mode:screen;
}
.bb-media--wide{aspect-ratio:16/9}
.bb-media--tall{aspect-ratio:3/4}
.bb-media--square{aspect-ratio:1/1}
.bb-media--band{aspect-ratio:21/9}
.bb-media__caption{
  position:absolute;left:16px;bottom:14px;z-index:3;
  font-family:var(--bb-font-mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bb-foam);
}

/* ============================================================
   显现协议
   ============================================================ */
[data-reveal="pending"]{opacity:0;transform:translateY(16px)}
[data-reveal="shown"]{opacity:1;transform:none;transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width:1180px){
  .bb-nav__list{gap:12px}
  .bb-nav__link{font-size:13.5px}
}

@media (max-width:1024px){
  .bb-footer__mast{grid-template-columns:1fr;gap:38px}
  .bb-footer__note{max-width:52ch}
}

@media (max-width:960px){
  :root{--bb-header-h:64px}
  .bb-topline{display:none}
  .bb-header__bar{min-height:64px;gap:12px}
  .bb-navtoggle{display:inline-flex}
  .bb-header__cta{display:none}
  .bb-brand__mark{width:32px;height:32px}
  .bb-brand__name{font-size:15.5px;letter-spacing:.1em}
  .bb-brand__sub{font-size:9.5px;letter-spacing:.24em}

  .bb-nav{
    position:fixed;top:var(--bb-header-h);right:0;bottom:0;
    width:min(88vw,380px);z-index:130;
    margin:0;padding:24px var(--bb-gutter) 32px;
    display:flex;flex-direction:column;gap:22px;
    background:var(--bb-deep);
    border-left:1px solid rgba(191,227,232,.16);
    box-shadow:-26px 0 60px -32px rgba(0,0,0,.9);
    overflow-y:auto;
    transform:translateX(102%);
    transition:transform .3s cubic-bezier(.3,.7,.2,1);
  }
  .bb-nav[data-open]{transform:translateX(0)}
  .bb-nav__list{flex-direction:column;align-items:stretch;gap:0}
  .bb-nav__item{border-bottom:1px solid rgba(191,227,232,.14)}
  .bb-nav__link{
    display:block;padding:15px 2px;
    font-size:19px;font-weight:700;letter-spacing:.06em;color:var(--bb-sand);
  }
  .bb-nav__link::after{display:none}
  .bb-nav__link[aria-current="page"]{color:var(--bb-coral);padding-left:16px}
  .bb-nav__link[aria-current="page"]::before{
    content:"";position:absolute;left:0;top:50%;
    width:6px;height:6px;background:var(--bb-yellow);transform:translateY(-50%);
  }
  .bb-nav__foot{display:grid;gap:12px;margin-top:auto;padding-top:8px}

  .bb-nav__scrim{
    display:block;position:fixed;inset:var(--bb-header-h) 0 0;z-index:120;
    background:rgba(3,16,22,.66);
    opacity:0;pointer-events:none;transition:opacity .3s ease;
  }
  .bb-header[data-nav-open] .bb-nav__scrim{opacity:1;pointer-events:auto}
  html.bb-nav-lock{overflow:hidden}

  .bb-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  body{font-size:16px}
}

@media (max-width:720px){
  .bb-footer__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
  .bb-footer__base{flex-direction:column;align-items:flex-start}
  .bb-contact{grid-template-columns:40px minmax(0,1fr) auto;font-size:13px}
  .bb-media--band{aspect-ratio:16/9}
}

@media (max-width:420px){
  .bb-footer__cols{grid-template-columns:1fr}
  .bb-cta,.bb-btn{font-size:13px}
}

/* ============================================================
   可访问性偏好
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal="pending"]{opacity:1;transform:none}
  .bb-progress__bar{transition:none}
}