/* ===========================================================
   火狐体育主站 · 共享外壳样式  /assets/site.css
   =========================================================== */

:root{
  --fox:#FF5A1F;
  --lava:#FF8A3D;
  --ink:#0B0E14;
  --rock:#1A1F2A;
  --volt:#2F7BFF;
  --flux:#35F0A0;
  --clay:#A8452B;
  --moss:#6F7A68;
  --cream:#F3EFE7;
  --edge:#4A5058;
  --mist:#C9CED6;
  --on-fox:#12060a;

  --rail-w:clamp(232px,18vw,288px);
  --bar-h:56px;
  --gap:clamp(1rem,2.4vw,2rem);
  --page-x:clamp(1.25rem,4vw,4.5rem);

  --font-head:"Source Han Sans SC","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-body:var(--font-head);
  --font-mono:ui-monospace,SFMono-Regular,"DejaVu Sans Mono",Menlo,Consolas,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --hard:6px 6px 0 0 rgba(0,0,0,.6);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  overflow-x:clip;
}
body{
  margin:0;
  overflow-x:clip;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.75;
  letter-spacing:.01em;
}
img,svg,video{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,h6{
  margin:0 0 .55em;
  font-family:var(--font-head);
  font-weight:900;
  line-height:1.1;
  letter-spacing:-.01em;
}
h1{font-size:clamp(2.25rem,6vw,4.5rem)}
h2{font-size:clamp(1.75rem,3.6vw,2.9rem)}
h3{font-size:clamp(1.2rem,2.1vw,1.65rem)}
h4{font-size:clamp(1.02rem,1.5vw,1.2rem)}
p{margin:0 0 1.05em}
a{color:var(--lava);text-decoration:none;transition:color .18s var(--ease)}
a:hover{color:var(--fox)}
strong,b{font-weight:800}
::selection{background:var(--fox);color:var(--on-fox)}

:focus-visible{
  outline:3px solid var(--volt);
  outline-offset:3px;
  border-radius:1px;
}

.u-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}

.skip-link{
  position:fixed;top:-120px;left:16px;z-index:300;
  display:inline-block;
  padding:12px 18px;
  background:var(--fox);color:var(--on-fox);
  font-weight:800;font-size:14px;letter-spacing:.06em;
  border:2px solid var(--ink);
  transition:top .2s var(--ease);
}
.skip-link:focus-visible{top:12px}

/* ===========================================================
   侧边轨道导航
   =========================================================== */
.rail-scrim{
  position:fixed;inset:0;z-index:70;
  background:rgba(11,14,20,.74);
  opacity:0;pointer-events:none;
  transition:opacity .24s var(--ease);
}
body[data-nav-open] .rail-scrim{opacity:1;pointer-events:auto}

.rail{
  background:var(--rock);
  color:var(--mist);
  border-right:3px solid var(--edge);
  display:flex;
  flex-direction:column;
}

.rail__top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}

.brand{
  display:flex;align-items:center;gap:12px;
  color:var(--cream);
}
.brand:hover{color:var(--cream)}
.brand__mark{
  position:relative;
  flex:0 0 44px;width:44px;height:44px;
  display:grid;place-items:center;
  background:var(--fox);
  border:2px solid var(--ink);
  box-shadow:4px 4px 0 0 rgba(0,0,0,.65);
  transform:skewX(-8deg);
}
.brand__slash{
  display:block;width:18px;height:3px;background:var(--cream);
  box-shadow:0 -7px 0 0 var(--cream),0 7px 0 0 var(--cream);
}
.brand__text{display:flex;flex-direction:column;min-width:0}
.brand__name{
  font-size:19px;font-weight:900;letter-spacing:.07em;line-height:1.2;
}
.brand__tag{
  font-size:11px;letter-spacing:.24em;color:var(--moss);line-height:1.6;
}

.rail__close{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;flex:0 0 42px;
  background:transparent;border:2px solid var(--edge);
  color:var(--cream);font-size:20px;line-height:1;cursor:pointer;
}
.rail__close:hover{border-color:var(--fox);color:var(--fox)}

.nav{position:relative;margin-top:30px;flex:1 1 auto;min-height:0}
.nav__list{display:flex;flex-direction:column;gap:2px;counter-reset:navi}
.nav__item{counter-increment:navi}
.nav__link{
  position:relative;display:block;
  padding:13px 46px 13px 18px;
  color:var(--mist);
  font-size:15px;font-weight:600;letter-spacing:.05em;
  transition:color .2s var(--ease),background .2s var(--ease);
}
.nav__link::before{
  content:"";position:absolute;left:0;top:50%;
  width:3px;height:0;background:var(--volt);
  transform:translateY(-50%);
  transition:height .24s var(--ease);
}
.nav__link::after{
  content:counter(navi,decimal-leading-zero);
  position:absolute;right:14px;top:50%;
  transform:translateY(-50%);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  color:var(--moss);
}
.nav__link:hover,
.nav__link:focus-visible{
  color:var(--cream);
  background:rgba(255,90,31,.1);
}
.nav__link[aria-current="page"]{
  color:#fff;
  background:linear-gradient(90deg,rgba(47,123,255,.28),rgba(47,123,255,0));
}
.nav__link[aria-current="page"]::before{height:72%}
.nav__link[aria-current="page"]::after{color:var(--volt)}

.rail__bottom{
  margin-top:auto;padding-top:22px;
  border-top:1px solid rgba(74,80,88,.6);
  display:grid;gap:10px;
}
.rail__note{
  margin:0;
  font-size:12px;letter-spacing:.05em;color:var(--moss);
}

/* ---------- 通用按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;
  font-family:var(--font-body);font-size:14px;font-weight:800;letter-spacing:.07em;
  border:2px solid var(--ink);border-radius:0;
  cursor:pointer;text-decoration:none;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.btn--fox{
  background:var(--fox);color:var(--on-fox);
  box-shadow:4px 4px 0 0 rgba(0,0,0,.6);
}
.btn--fox:hover{
  background:var(--lava);color:var(--on-fox);
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 0 rgba(0,0,0,.6);
}
.btn--ghost{
  background:transparent;color:var(--cream);border-color:var(--edge);
  box-shadow:none;
}
.btn--ghost:hover{border-color:var(--lava);color:var(--lava)}
.btn--wide{width:100%}

/* ===========================================================
   移动端顶栏
   =========================================================== */
.headbar{display:none}
.headbar__brand{
  font-size:19px;font-weight:900;letter-spacing:.09em;color:var(--cream);
}
.headbar__brand:hover{color:var(--cream)}
.headbar__brand-accent{color:var(--fox)}

.navbtn{
  display:inline-flex;align-items:center;gap:10px;
  min-height:44px;padding:8px 14px;
  background:transparent;border:2px solid var(--edge);
  color:var(--cream);font-size:13px;font-weight:700;letter-spacing:.1em;
  cursor:pointer;
}
.navbtn:hover{border-color:var(--fox);color:var(--fox)}
.navbtn__bars{
  position:relative;display:block;width:18px;height:2px;
  background:currentColor;
}
.navbtn__bars::before,
.navbtn__bars::after{
  content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;
}
.navbtn__bars::before{top:-6px}
.navbtn__bars::after{top:6px}

/* ===========================================================
   比分滚动条
   =========================================================== */
.ticker{
  position:sticky;top:0;z-index:55;
  display:flex;align-items:stretch;
  height:52px;
  background:var(--ink);
  border-bottom:3px solid var(--fox);
}
.ticker__label{
  display:flex;align-items:center;gap:8px;flex:0 0 auto;
  padding:0 clamp(12px,2vw,20px);
  background:var(--fox);color:var(--on-fox);
  font-size:12px;font-weight:900;letter-spacing:.2em;
}
.ticker__dot{
  width:8px;height:8px;border-radius:50%;background:var(--on-fox);
  animation:pulse 1.6s var(--ease) infinite;
}
@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.3;transform:scale(.62)}
}
.ticker__word{white-space:nowrap}

.ticker__viewport{
  position:relative;flex:1 1 auto;min-width:0;
  overflow:hidden;display:flex;align-items:center;
}
.ticker__track{
  display:flex;align-items:center;
  width:max-content;
  will-change:transform;
}
.ticker[data-ticker-ready] .ticker__track{
  animation:tick 44s linear infinite;
}
.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track{animation-play-state:paused}
@keyframes tick{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

.ticker__item{
  flex:0 0 auto;
  border-right:1px solid var(--edge);
}
.ticker__link{
  display:flex;align-items:center;gap:12px;
  height:49px;padding:0 clamp(12px,1.8vw,20px);
  color:var(--cream);white-space:nowrap;line-height:1;
}
.ticker__link:hover{background:rgba(255,90,31,.14);color:var(--cream)}
.ticker__link:focus-visible{background:rgba(47,123,255,.16)}
.ticker__league{
  padding:3px 7px;
  font-size:11px;letter-spacing:.14em;color:var(--moss);
  border:1px solid var(--edge);
}
.ticker__teams{font-size:14px;font-weight:600;letter-spacing:.02em}
.ticker__score{
  padding:0 2px;
  font-family:var(--font-mono);font-weight:700;font-size:19px;
  letter-spacing:-.04em;color:#fff;
}
.ticker__sep{color:var(--edge);padding:0 3px}
.ticker__state{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--moss);
}
.ticker__state--live{color:var(--flux)}
.ticker__state--live::before{
  content:"";display:inline-block;
  width:6px;height:6px;margin-right:6px;border-radius:50%;
  background:var(--flux);vertical-align:middle;
  animation:pulse 1.6s var(--ease) infinite;
}
.ticker__progress{
  position:absolute;left:0;
  bottom:-3px;height:3px;width:0;
  background:var(--volt);z-index:2;
}

/* ===========================================================
   移动端悬浮反馈入口
   =========================================================== */
.fab{
  position:fixed;
  right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));
  z-index:64;
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 16px;
  background:var(--fox);color:var(--on-fox);
  font-size:13px;font-weight:800;letter-spacing:.06em;
  border:2px solid var(--ink);
  box-shadow:4px 4px 0 0 rgba(0,0,0,.65);
  text-decoration:none;
}
.fab:hover{background:var(--lava);color:var(--on-fox)}

/* ===========================================================
   页脚
   =========================================================== */
.site-foot{
  position:relative;
  margin-top:clamp(48px,8vw,120px);
  background:var(--rock);
  color:var(--mist);
  overflow:hidden;
}
.site-foot::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:6px;
  background:linear-gradient(90deg,var(--fox) 0 38%,var(--clay) 38% 60%,var(--volt) 60% 100%);
}

.foot__main{
  display:grid;gap:clamp(28px,4vw,56px);
  grid-template-columns:1fr;
  padding:clamp(44px,6vw,84px) var(--page-x) 0;
}
.foot__brand{min-width:0}
.foot__logo{
  margin:0 0 10px;
  font-size:clamp(22px,3vw,28px);font-weight:900;letter-spacing:.07em;color:var(--cream);
}
.foot__logo span{
  margin-left:8px;
  font-size:12px;font-weight:700;letter-spacing:.3em;color:var(--fox);
  vertical-align:middle;
}
.foot__line{
  margin:0 0 22px;
  font-size:13px;letter-spacing:.1em;color:var(--moss);
}
.foot__top{flex:0 0 auto}

.foot__cols{
  display:grid;gap:28px;
  grid-template-columns:1fr;
  min-width:0;
}
.foot__title{
  margin:0 0 16px;padding-bottom:8px;
  font-size:12px;font-weight:800;letter-spacing:.26em;color:var(--cream);
  border-bottom:2px solid var(--clay);
}
.foot__list{display:grid;gap:10px}
.foot__list a{
  font-size:14px;color:var(--mist);letter-spacing:.03em;
}
.foot__list a:hover{color:var(--fox)}

.foot__contact{min-width:0}
.foot__dl{margin:0;display:grid;gap:12px}
.foot__row{display:grid;gap:3px}
.foot__row dt{
  font-size:11px;letter-spacing:.2em;color:var(--moss);
}
.foot__row dd{
  margin:0;font-size:14px;color:var(--mist);word-break:break-word;
}
.foot__mono{font-family:var(--font-mono);letter-spacing:.02em}
.foot__note{
  margin:16px 0 0;
  font-size:12px;line-height:1.7;color:var(--moss);letter-spacing:.03em;
}

.foot__bottom{
  margin-top:clamp(28px,4vw,56px);
  padding:20px var(--page-x) calc(20px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--edge);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;
  font-size:12px;color:var(--moss);letter-spacing:.05em;
}
.foot__copy{margin:0}
.foot__icp{margin:0;font-family:var(--font-mono)}
.foot__legal{display:flex;flex-wrap:wrap;gap:9px 18px;margin-left:auto}
.foot__legal a{color:var(--moss);font-size:12px}
.foot__legal a:hover{color:var(--lava)}

/* ===========================================================
   页面级通用组件
   =========================================================== */
.wrap{
  width:100%;max-width:1180px;
  margin-inline:auto;
  padding-inline:var(--page-x);
}
.wrap--wide{max-width:1440px}
.prose{max-width:68ch}
.slab--dark{background:var(--ink);color:var(--cream)}
.slab--light{background:var(--cream);color:var(--ink)}
.slab--light a{color:var(--clay)}
.slab--light a:hover{color:var(--fox)}

.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin:clamp(24px,4vw,48px) 0;
  font-size:12px;letter-spacing:.14em;color:var(--moss);
}
.crumbs li{display:flex;align-items:center;gap:10px}
.crumbs li+li::before{content:"/";color:var(--edge)}
.crumbs a{color:var(--moss)}
.crumbs a:hover{color:var(--lava)}

.sec{position:relative;padding-block:clamp(44px,7vw,96px)}
.sec__no{
  display:block;
  font-family:var(--font-mono);font-weight:700;
  font-size:clamp(46px,8vw,96px);line-height:.82;
  letter-spacing:-.05em;color:var(--fox);
}
.sec__label{
  display:inline-block;margin-top:12px;
  font-size:12px;font-weight:700;letter-spacing:.3em;color:var(--moss);
  text-transform:uppercase;
}

.grid{display:grid;gap:var(--gap)}
@media (min-width:768px){
  .grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1100px){
  .grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

.card{
  position:relative;
  background:var(--rock);
  border:2px solid var(--edge);
  padding:clamp(18px,2.4vw,28px);
}
.card--hard{box-shadow:var(--hard)}
.slab--light .card{background:#fff;border-color:var(--ink);color:var(--ink)}

.num{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;
}

.filters{display:flex;flex-wrap:wrap;gap:8px}
.filter{
  padding:9px 15px;
  background:transparent;border:2px solid var(--edge);
  color:var(--mist);font-size:13px;font-weight:700;letter-spacing:.06em;
  cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.filter:hover{border-color:var(--lava);color:var(--lava)}
.filter[data-active="true"],
.filter[aria-selected="true"]{
  background:var(--fox);border-color:var(--fox);color:var(--on-fox);
}

.acc{display:grid;gap:10px}
.acc__item{
  background:var(--rock);
  border:2px solid var(--edge);
  transition:border-color .2s var(--ease);
}
.acc__item[data-open]{border-color:var(--fox)}
.acc__trigger{
  display:flex;align-items:center;gap:14px;width:100%;
  padding:16px 18px;
  background:transparent;border:0;
  color:var(--cream);text-align:left;
  font-size:16px;font-weight:800;letter-spacing:.03em;
  cursor:pointer;
}
.acc__trigger::before{
  content:"";flex:0 0 10px;width:10px;height:10px;
  border-right:2px solid var(--volt);border-bottom:2px solid var(--volt);
  transform:rotate(45deg);transition:transform .24s var(--ease);
}
.acc__item[data-open] .acc__trigger::before{transform:rotate(-135deg)}
.acc__panel{
  height:0;overflow:hidden;
  transition:height .24s var(--ease);
}
.acc__inner{padding:0 18px 18px 42px;font-size:15px;color:var(--mist)}
.slab--light .acc__item{background:#fff;border-color:var(--ink)}
.slab--light .acc__trigger{color:var(--ink)}

/* ---------- 响应式图片容器 ---------- */
.media{
  position:relative;display:block;overflow:hidden;
  background:var(--rock);
  border:2px solid var(--edge);
}
.media > img,
.media > picture > img{
  width:100%;height:100%;object-fit:cover;
  filter:contrast(1.06) saturate(1.05);
}
.media--frame{box-shadow:var(--hard)}
.media--21x9{aspect-ratio:21/9}
.media--16x9{aspect-ratio:16/9}
.media--4x3{aspect-ratio:4/3}
.media--1x1{aspect-ratio:1/1}
.media--tall{aspect-ratio:3/4}
.slab--light .media{border-color:var(--ink)}
.media__cap{
  position:absolute;left:0;bottom:0;
  padding:6px 11px;
  background:var(--ink);color:var(--cream);
  font-size:11px;letter-spacing:.14em;
}
.media__tag{
  position:absolute;left:0;top:0;
  padding:5px 11px;
  background:var(--fox);color:var(--on-fox);
  font-size:11px;font-weight:800;letter-spacing:.18em;
}

/* ---------- 进入视口显现 ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
[data-reveal].is-in{opacity:1;transform:none}

/* ===========================================================
   断点
   =========================================================== */
@media (max-width:1023.98px){
  .rail{
    position:fixed;top:0;bottom:0;left:0;z-index:80;
    width:min(86vw,330px);
    padding:20px 18px 24px;
    overflow-y:auto;overscroll-behavior:contain;
    transform:translateX(-102%);
    transition:transform .28s var(--ease);
    border-right:3px solid var(--fox);
  }
  .rail[data-open],
  body[data-nav-open] .rail{transform:translateX(0)}

  body[data-nav-open]{overflow:hidden}

  .headbar{
    position:sticky;top:0;z-index:65;
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    height:var(--bar-h);
    padding:0 clamp(12px,4vw,20px);
    background:var(--rock);
    border-bottom:2px solid var(--edge);
  }
  .ticker{top:var(--bar-h)}
}

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

@media (min-width:1024px){
  :root{--bar-h:0px}
  body{padding-left:var(--rail-w)}
  .rail{
    position:fixed;top:0;bottom:0;left:0;z-index:60;
    width:var(--rail-w);
    padding:30px 24px 26px;
    overflow-y:auto;overscroll-behavior:contain;
  }
  .rail__close{display:none}
  .rail-scrim{display:none}
  .headbar{display:none}
  .nav__link{padding-right:52px}
}

@media (min-width:1080px){
  .foot__main{grid-template-columns:1.1fr 2fr .95fr}
}

@media (min-width:1280px){
  .foot__legal{margin-left:auto}
}

/* ===========================================================
   动效偏好
   =========================================================== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .ticker[data-ticker-ready] .ticker__track{animation:none}
  .ticker__viewport{overflow-x:auto}
  [data-reveal]{opacity:1;transform:none}
}