/* =========================================================
   FB赛事主站 · 共享样式表 /assets/site.css
   ========================================================= */

/* ---------- 变量 ---------- */
:root{
  --fb-ink-900:#0A1826;
  --fb-ink-700:#12263A;
  --fb-jade-zone:#0E3B3A;
  --fb-indigo-zone:#2A2450;
  --fb-wine-zone:#4A1626;
  --fb-cyan:#35E3E0;
  --fb-orange:#FF7A1A;
  --fb-turf:#33A85A;
  --fb-whistle:#E8443F;
  --fb-paper:#F3F0E8;
  --fb-text:#E9F1F7;
  --fb-text-muted:#A9BCCB;
  --fb-text-on-light:#0F1F2E;
  --fb-hairline:#2A415A;
  --fb-hairline-on-paper:#CFC7B5;

  --fb-font-head:"Oswald","Barlow Condensed","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --fb-font-body:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --fb-font-num:"IBM Plex Mono","JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --fb-rail-w:250px;
  --fb-shell-max:1440px;
  --fb-content-max:1160px;
  --fb-radius:2px;
  --fb-ease:160ms cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--fb-ink-900);
  color:var(--fb-text);
  font-family:var(--fb-font-body);
  font-size:16px;
  font-weight:400;
  line-height:1.75;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--fb-cyan);text-decoration:none;background-color:transparent}
img,svg,picture{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:0}
button{cursor:pointer}
hr{border:0;margin:0}
::selection{background:rgba(53,227,224,.28);color:#fff}
:focus-visible{outline:2px solid var(--fb-cyan);outline-offset:3px;border-radius:2px}
@media (max-width:1099px){
  body{padding-bottom:74px}
}

/* ---------- 跳转链接 ---------- */
.fb-skip{
  position:absolute;left:14px;top:-70px;z-index:200;
  padding:10px 18px;border-radius:var(--fb-radius);
  background:var(--fb-cyan);color:#04161C;font-size:13px;font-weight:700;letter-spacing:.08em;
  transition:top var(--fb-ease);
}
.fb-skip:focus{top:14px}

/* ---------- 页头外壳 ---------- */
.fb-masthead{
  position:relative;z-index:60;
  background:
    linear-gradient(180deg,rgba(53,227,224,.07),rgba(53,227,224,0) 68%),
    var(--fb-ink-900);
  border-bottom:1px solid var(--fb-hairline);
}
.fb-masthead::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(42,65,90,.42) 1px,transparent 1px),
    linear-gradient(90deg,rgba(42,65,90,.42) 1px,transparent 1px);
  background-size:64px 64px;
  opacity:.55;
}
.fb-masthead__grid{
  position:relative;z-index:1;
  max-width:var(--fb-shell-max);margin:0 auto;
  display:grid;grid-template-columns:1fr;
}

/* ---------- 阅读进度 ---------- */
.fb-progress{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;z-index:5;
  background:rgba(42,65,90,.55);pointer-events:none;
}
.fb-progress__bar{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--fb-cyan),var(--fb-orange));
}

/* ---------- 左侧数据导轨 ---------- */
.fb-rail{display:none}
.fb-rail__block{padding:0 0 22px;margin-bottom:22px;border-bottom:1px solid var(--fb-hairline)}
.fb-rail__block:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.fb-rail__label{
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fb-text-muted);margin-bottom:10px;
}
.fb-rail__links{display:grid;gap:2px}
.fb-rail__link{
  display:block;padding:8px 0 8px 12px;
  font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--fb-text-muted);
  border-left:1px solid var(--fb-hairline);
  transition:color var(--fb-ease),border-color var(--fb-ease),transform var(--fb-ease);
}
.fb-rail__link:hover{color:var(--fb-cyan);border-left-color:var(--fb-cyan);transform:translateX(2px)}
.fb-rail__stat{display:flex;align-items:baseline;gap:8px;font-size:12px;color:var(--fb-text-muted);line-height:1.5;margin-bottom:8px}
.fb-rail__unit{letter-spacing:.04em}

/* ---------- 刊头主体 ---------- */
.fb-head{display:flex;flex-direction:column;padding:16px 18px 0}
.fb-head__bar{display:flex;align-items:center;justify-content:space-between;gap:16px}
.fb-brand{display:inline-flex;align-items:center;gap:12px;color:var(--fb-text)}
.fb-brand__mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:clamp(38px,7vw,52px);height:clamp(38px,7vw,52px);
  border-radius:var(--fb-radius);
  background:linear-gradient(140deg,var(--fb-cyan),#17A7C4);
  color:#04161C;font-family:var(--fb-font-head);font-weight:900;
  font-size:clamp(17px,3vw,23px);letter-spacing:.02em;line-height:1;
}
.fb-brand__text{display:flex;flex-direction:column}
.fb-brand__name{
  font-family:var(--fb-font-head);font-weight:800;
  font-size:clamp(18px,3vw,26px);line-height:1.05;letter-spacing:.06em;color:var(--fb-text);
}
.fb-brand__tag{font-size:11px;letter-spacing:.18em;color:var(--fb-text-muted);margin-top:4px}

/* ---------- 移动导航按钮 ---------- */
.fb-navtoggle{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 12px;border:1px solid var(--fb-hairline);border-radius:var(--fb-radius);
  color:var(--fb-text);font-size:12px;font-weight:600;letter-spacing:.14em;
  transition:border-color var(--fb-ease),color var(--fb-ease);
}
.fb-navtoggle:hover{border-color:var(--fb-cyan);color:var(--fb-cyan)}
.fb-navtoggle__bars{position:relative;display:block;width:16px;height:1px;background:var(--fb-cyan)}
.fb-navtoggle__bars::before,
.fb-navtoggle__bars::after{content:"";position:absolute;left:0;width:16px;height:1px;background:var(--fb-cyan)}
.fb-navtoggle__bars::before{top:-5px}
.fb-navtoggle__bars::after{top:5px}

/* ---------- 导航面板 ---------- */
.fb-head__panel{display:none;padding-top:4px}
.fb-masthead[data-open] .fb-head__panel{display:block}
.fb-nav{width:100%}
.fb-nav__list{display:flex;flex-direction:column;gap:0;margin-top:14px;border-top:1px solid var(--fb-hairline)}
.fb-nav__item{list-style:none}
.fb-nav__link{
  display:block;padding:12px 2px;
  font-size:14px;font-weight:600;letter-spacing:.1em;color:var(--fb-text-muted);
  border-bottom:1px solid var(--fb-hairline);
  transition:color var(--fb-ease),border-color var(--fb-ease),transform var(--fb-ease);
}
.fb-nav__link:hover{color:var(--fb-text)}
.fb-nav__link[aria-current="page"]{color:var(--fb-cyan);border-bottom-color:var(--fb-cyan)}
.fb-nav__item--cta{margin:14px 0 18px}
.fb-nav__item--cta .fb-btn{width:100%}

/* ---------- 移动端底部回访条 ---------- */
.fb-returnbar{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  background:rgba(10,24,38,.97);
  border-top:1px solid var(--fb-hairline);
}
.fb-returnbar__link{
  display:flex;align-items:center;justify-content:center;
  padding:10px 6px;border:1px solid var(--fb-hairline);border-radius:var(--fb-radius);
  background:var(--fb-ink-700);color:var(--fb-text);
  font-size:12px;font-weight:600;letter-spacing:.1em;text-align:center;
  transition:border-color var(--fb-ease),color var(--fb-ease);
}
.fb-returnbar__link:hover{border-color:var(--fb-cyan);color:var(--fb-cyan)}
.fb-returnbar__link--signal{background:var(--fb-cyan);border-color:var(--fb-cyan);color:#04161C}

/* ---------- 页脚 ---------- */
.fb-footer{
  position:relative;
  background:linear-gradient(180deg,var(--fb-ink-900) 0%,#071320 100%);
  border-top:1px solid var(--fb-hairline);
}
.fb-footer::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 10% 0%,rgba(53,227,224,.12),transparent 46%),
    radial-gradient(circle at 90% 12%,rgba(255,122,26,.09),transparent 42%);
}
.fb-footer__inner{position:relative;max-width:var(--fb-content-max);margin:0 auto;padding:52px 20px 40px}
.fb-footer__mast{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px 16px}
.fb-footer__brand{display:inline-flex;align-items:baseline;gap:10px;color:var(--fb-text)}
.fb-footer__mark{
  font-family:var(--fb-font-head);font-weight:900;font-size:28px;line-height:1;
  letter-spacing:.02em;color:var(--fb-cyan);
}
.fb-footer__name{font-family:var(--fb-font-head);font-weight:800;font-size:19px;letter-spacing:.1em;color:var(--fb-text)}
.fb-footer__tag{font-size:12px;letter-spacing:.18em;color:var(--fb-text-muted)}
.fb-footer__grid{display:grid;grid-template-columns:1fr;gap:30px;margin-top:36px}
.fb-footer__heading{
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fb-text-muted);margin-bottom:14px;
}
.fb-footer__list{display:grid;gap:2px}
.fb-footer__link{
  display:inline-block;padding:6px 0;
  font-size:14px;color:var(--fb-text);
  border-bottom:1px solid transparent;
  transition:color var(--fb-ease),border-color var(--fb-ease);
}
.fb-footer__link:hover{color:var(--fb-cyan);border-bottom-color:var(--fb-cyan)}
.fb-footer__text{font-size:14px;color:var(--fb-text);line-height:1.9}
.fb-footer__note{margin-top:12px;font-size:12px;line-height:1.75;color:var(--fb-text-muted);max-width:44ch}
.fb-footer__rule{margin:38px 0 22px;background:var(--fb-hairline)}
.fb-footer__meta{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center}
.fb-footer__legal,
.fb-footer__closing,
.fb-footer__copy{font-size:12px;letter-spacing:.04em;color:var(--fb-text-muted)}
.fb-footer__closing{color:var(--fb-text)}
.fb-footer__copy{font-family:var(--fb-font-num);letter-spacing:0}

/* ---------- 回到顶部 ---------- */
.fb-totop{
  position:fixed;right:22px;bottom:26px;z-index:90;
  display:none;align-items:center;gap:8px;
  padding:10px 16px;border:1px solid var(--fb-hairline);border-radius:var(--fb-radius);
  background:rgba(18,38,58,.94);color:var(--fb-cyan);
  font-size:12px;font-weight:600;letter-spacing:.12em;
  transition:border-color var(--fb-ease),transform var(--fb-ease);
}
.fb-totop:hover{border-color:var(--fb-cyan);transform:translateY(-2px)}
.fb-totop.is-on{display:inline-flex}

/* ---------- 通用容器与分区 ---------- */
.fb-container{width:100%;max-width:var(--fb-content-max);margin:0 auto;padding:0 20px}
.fb-section{padding:56px 0}
.fb-section--paper{background:var(--fb-paper);color:var(--fb-text-on-light)}
.fb-section--jade{background:var(--fb-jade-zone);color:var(--fb-text)}
.fb-section--indigo{background:var(--fb-indigo-zone);color:var(--fb-text)}
.fb-section--wine{background:var(--fb-wine-zone);color:var(--fb-text)}
.fb-section--paper .fb-h1,
.fb-section--paper .fb-h2,
.fb-section--paper .fb-h3{color:var(--fb-text-on-light)}
.fb-section--paper .fb-lead{color:#3E4C57}
.fb-section--paper .fb-eyebrow{color:#0B6E78}

/* ---------- 通用栅格 ---------- */
.fb-grid{display:grid;grid-template-columns:1fr;gap:22px}
.fb-grid--2,.fb-grid--3,.fb-grid--4{grid-template-columns:1fr}

/* ---------- 排版 ---------- */
.fb-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--fb-cyan);
}
.fb-eyebrow::before{content:"";display:block;width:22px;height:1px;background:currentColor}
.fb-h1{
  font-family:var(--fb-font-head);font-weight:800;
  font-size:clamp(28px,4.2vw,56px);line-height:1.08;letter-spacing:-.01em;color:var(--fb-text);
}
.fb-h2{
  font-family:var(--fb-font-head);font-weight:700;
  font-size:clamp(22px,2.6vw,34px);line-height:1.16;letter-spacing:-.005em;color:var(--fb-text);
}
.fb-h3{
  font-family:var(--fb-font-head);font-weight:700;
  font-size:clamp(17px,1.6vw,22px);line-height:1.32;color:var(--fb-text);
}
.fb-lead{font-size:16px;line-height:1.8;color:var(--fb-text-muted);max-width:62ch}
.fb-num{
  font-family:var(--fb-font-num);font-weight:600;color:var(--fb-orange);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.fb-num--xl{font-size:clamp(24px,3vw,34px);line-height:1}

/* ---------- 通用列表 ---------- */
.fb-list{display:grid;gap:12px}
.fb-list__item{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.75;color:var(--fb-text-muted)}
.fb-list__item::before{
  content:"";flex:0 0 auto;width:6px;height:6px;margin-top:9px;
  background:var(--fb-cyan);border-radius:1px;
}

/* ---------- 按钮 ---------- */
.fb-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border:1px solid var(--fb-cyan);border-radius:var(--fb-radius);
  background:transparent;color:var(--fb-cyan);
  font-family:var(--fb-font-body);font-size:13px;font-weight:700;letter-spacing:.08em;
  text-align:center;
  transition:transform var(--fb-ease),background-color var(--fb-ease),color var(--fb-ease),border-color var(--fb-ease);
}
.fb-btn:hover{transform:translateY(-2px);background:rgba(53,227,224,.1)}
.fb-btn--signal{background:var(--fb-orange);border-color:var(--fb-orange);color:#16100A}
.fb-btn--signal:hover{background:#FF9245;border-color:#FF9245;color:#16100A}
.fb-btn--ghost{border-color:var(--fb-hairline);color:var(--fb-text)}
.fb-btn--ghost:hover{border-color:var(--fb-cyan);color:var(--fb-cyan);background:rgba(53,227,224,.08)}
.fb-btn--sm{padding:8px 14px;font-size:12px;letter-spacing:.1em}

/* ---------- 面包屑 ---------- */
.fb-breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:12px;letter-spacing:.06em;color:var(--fb-text-muted);
}
.fb-breadcrumb__link{color:var(--fb-text-muted);transition:color var(--fb-ease)}
.fb-breadcrumb__link:hover{color:var(--fb-cyan)}
.fb-breadcrumb__sep{color:var(--fb-hairline)}
.fb-breadcrumb__current{color:var(--fb-text)}

/* ---------- 卡片 ---------- */
.fb-card{
  position:relative;
  background:var(--fb-ink-700);border:1px solid var(--fb-hairline);border-radius:var(--fb-radius);
  padding:22px;
  transition:transform var(--fb-ease),border-color var(--fb-ease),box-shadow var(--fb-ease);
}
.fb-card:hover{
  transform:translateY(-2px);
  border-color:rgba(53,227,224,.55);
  box-shadow:0 10px 26px rgba(0,0,0,.36);
}
.fb-card__meta{font-size:12px;letter-spacing:.12em;color:var(--fb-text-muted);margin-bottom:10px}
.fb-card__title{font-family:var(--fb-font-head);font-weight:700;font-size:19px;line-height:1.3;color:var(--fb-text);margin-bottom:8px}
.fb-card__text{font-size:14px;line-height:1.75;color:var(--fb-text-muted)}

/* ---------- 标签 ---------- */
.fb-tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 9px;border:1px solid var(--fb-hairline);border-radius:var(--fb-radius);
  font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--fb-text-muted);
}
.fb-tag--cyan{color:var(--fb-cyan);border-color:rgba(53,227,224,.5)}
.fb-tag--orange{color:var(--fb-orange);border-color:rgba(255,122,26,.5)}
.fb-tag--turf{color:var(--fb-turf);border-color:rgba(51,168,90,.5)}
.fb-tag--whistle{color:var(--fb-whistle);border-color:rgba(232,68,63,.5)}

/* ---------- 分隔线 ---------- */
.fb-divider{display:block;width:100%;height:1px;background:var(--fb-hairline)}

/* ---------- 图片容器 ---------- */
.fb-figure{margin:0}
.fb-figure__frame{
  position:relative;display:block;width:100%;
  aspect-ratio:16 / 10;overflow:hidden;
  border:1px solid var(--fb-hairline);border-radius:var(--fb-radius);
  background:linear-gradient(135deg,var(--fb-ink-700) 0%,#0C1B2C 100%);
}
.fb-figure__frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(53,227,224,.1) 1px,transparent 1px),
    linear-gradient(90deg,rgba(53,227,224,.1) 1px,transparent 1px);
  background-size:34px 34px;
}
.fb-figure__frame img,
.fb-figure__frame picture,
.fb-figure__frame svg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.fb-figure__frame--wide{aspect-ratio:21 / 9}
.fb-figure__frame--tall{aspect-ratio:3 / 4}
.fb-figure__frame--square{aspect-ratio:1 / 1}
.fb-figure__caption{margin-top:10px;font-size:12px;line-height:1.6;color:var(--fb-text-muted)}

/* ---------- 滚动显现 ---------- */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
[data-reveal].is-visible{opacity:1;transform:none}

/* =========================================================
   平板 / 桌面
   ========================================================= */
@media (min-width:700px){
  .fb-section{padding:80px 0}
  .fb-grid--2,.fb-grid--3,.fb-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fb-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px}
}

@media (min-width:1020px){
  .fb-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fb-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media (min-width:1100px){
  .fb-masthead__grid{grid-template-columns:var(--fb-rail-w) minmax(0,1fr)}

  .fb-rail{
    display:block;
    padding:28px 22px 30px;
    border-right:1px solid var(--fb-hairline);
    background:linear-gradient(180deg,rgba(18,38,58,.85),rgba(10,24,38,.25));
  }

  .fb-head{padding:30px 44px 8px}
  .fb-head__bar{justify-content:center}
  .fb-navtoggle{display:none}

  .fb-head__panel{display:flex;flex-direction:column;align-items:center;padding-top:0}
  .fb-nav__list{
    flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;
    gap:34px;margin-top:20px;padding-bottom:18px;
    border-top:1px solid var(--fb-hairline);
  }
  .fb-nav__link{
    padding:12px 0;border-bottom:1px solid transparent;font-size:13.5px;letter-spacing:.14em;
  }
  .fb-nav__item--cta{margin:0 0 0 6px}
  .fb-nav__item--cta .fb-btn{width:auto}

  .fb-returnbar{display:none}
  .fb-footer__grid{grid-template-columns:1fr 1fr 1.4fr}
}

@media (min-width:1280px){
  .fb-head{padding:34px 64px 10px}
  .fb-nav__list{gap:44px}
}

/* =========================================================
   无障碍与降级
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{opacity:1 !important;transform:none !important}
  .fb-btn:hover,.fb-card:hover,.fb-totop:hover,.fb-rail__link:hover{transform:none}
}
