/* ==========================================================================
   万合足球赛场 — 共享样式 /assets/site.css
   夜场战术板：深草皮绿分层 + 暖白灯光 + CSL 橙金 / EPL 紫红识别色 + 荧光青绿数据高亮
   ========================================================================== */

/* ---------- 1 重置 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,h5,p,ul,ol,li,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
img,svg,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;width:100%}

/* ---------- 2 变量 ---------- */
:root{
  --pitch-deep:#0B2A1F;
  --pitch-mid:#144D36;
  --pitch-light:#1E6B4A;
  --flood:#F5F0E4;
  --parchment:#E7DFCB;
  --epl:#6D1F4B;
  --csl:#E08A1E;
  --mint:#5FF2C2;
  --ink:#07120D;
  --glass:rgba(245,240,228,.10);
  --line:rgba(245,240,228,.14);
  --line-strong:rgba(245,240,228,.30);
  --text-soft:rgba(245,240,228,.74);
  --text-faint:rgba(245,240,228,.55);

  --accent:var(--csl);
  --accent-ink:var(--ink);

  --font-display:'Barlow Condensed','Oswald','Noto Sans SC','PingFang SC',sans-serif;
  --font-body:'Noto Sans SC','Source Han Sans SC','Microsoft YaHei',sans-serif;
  --font-mono:'JetBrains Mono','Roboto Mono','SFMono-Regular',monospace;

  --fs-hero-time:clamp(3.5rem,8vw,7rem);
  --fs-h1:clamp(2rem,4vw,3.4rem);
  --fs-h2:clamp(1.35rem,2.4vw,2rem);
  --fs-label:12px;
  --fs-score:clamp(2rem,4vw,3.8rem);
  --fs-body:16px;

  --wrap:1180px;
  --pad:clamp(1rem,4vw,2.5rem);
  --dur:200ms;
  --ease:cubic-bezier(.2,.7,.2,1);
  --radius:2px;
}
:root[data-league="csl"]{--accent:var(--csl);--accent-ink:var(--ink)}
:root[data-league="epl"]{--accent:var(--epl);--accent-ink:var(--flood)}

/* ---------- 3 中文排版与基础节奏 ---------- */
body{
  min-height:100vh;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.75;
  color:var(--flood);
  background-color:var(--pitch-deep);
  background-image:
    radial-gradient(120% 70% at 50% -12%, rgba(95,242,194,.10), transparent 62%),
    repeating-linear-gradient(90deg, rgba(30,107,74,.38) 0 1px, transparent 1px 144px);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.12;letter-spacing:.02em;font-variant-numeric:tabular-nums}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:1.1rem;letter-spacing:.05em}
::selection{background:var(--mint);color:var(--ink)}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:2px}
.mono,.score,.label{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ---------- 4 版心与区块 ---------- */
.wrap{width:min(100% - (var(--pad) * 2), var(--wrap));margin-inline:auto}
.wrap--narrow{max-width:820px}
.section{padding-block:clamp(2.5rem,6vw,5rem)}
.section--tight{padding-block:clamp(1.5rem,3vw,2.5rem)}
.grid{display:grid;gap:clamp(1rem,2.4vw,2rem)}
.grid--7-5{grid-template-columns:7fr 5fr}
.grid--5-7{grid-template-columns:5fr 7fr}
.grid--8-4{grid-template-columns:8fr 4fr}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ---------- 5 通用按钮 / 标签 / 容器层 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.6rem 1.05rem;border:1px solid var(--line-strong);border-radius:var(--radius);
  font-family:var(--font-body);font-size:.875rem;font-weight:600;letter-spacing:.04em;
  color:var(--flood);background:rgba(245,240,228,.04);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.btn:hover,.btn:focus-visible{border-color:var(--mint);color:var(--mint);background:rgba(95,242,194,.08)}
.btn--primary{background:var(--accent);border-color:transparent;color:var(--accent-ink)}
.btn--primary:hover,.btn--primary:focus-visible{filter:brightness(1.08);color:var(--accent-ink);background:var(--accent)}
.btn--quiet{background:transparent;border-color:var(--line);color:var(--text-soft)}
.btn--sm{padding:.42rem .8rem;font-size:.8rem}

.label{
  display:inline-block;font-size:var(--fs-label);line-height:1.4;
  letter-spacing:.24em;text-transform:uppercase;color:var(--text-faint);
}
.tag{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.16rem .5rem;border:1px solid currentColor;border-radius:var(--radius);
  font-family:var(--font-mono);font-size:.7rem;line-height:1.5;letter-spacing:.18em;text-transform:uppercase;
}
.tag--csl{background:var(--csl);border-color:transparent;color:var(--ink)}
.tag--epl{background:var(--epl);border-color:transparent;color:var(--flood)}
.tag--mint{background:var(--mint);border-color:transparent;color:var(--ink)}

.card{position:relative;background:var(--pitch-mid);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1rem,2vw,1.5rem)}
.card::before{content:"";position:absolute;left:0;top:0;width:44px;height:3px;background:var(--accent);opacity:.9}
.glass{
  background:var(--glass);border:1px solid var(--line-strong);border-radius:var(--radius);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.score{font-size:var(--fs-score);line-height:1;letter-spacing:-.02em;color:var(--mint)}
.score--plain{color:var(--flood)}

/* ---------- 6 面包屑 ---------- */
.breadcrumbs{margin-block:1.25rem .5rem}
.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:.5rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.breadcrumbs li{display:flex;align-items:center;gap:.5rem}
.breadcrumbs li + li::before{content:"/";color:var(--accent)}
.breadcrumbs a:hover,.breadcrumbs a:focus-visible{color:var(--mint)}
.breadcrumbs [aria-current="page"]{color:var(--flood)}

/* ---------- 7 正文 ---------- */
.prose{max-width:68ch;color:rgba(245,240,228,.86)}
.prose h2{margin-top:2rem;margin-bottom:.75rem;color:var(--flood)}
.prose h3{margin-top:1.5rem;margin-bottom:.5rem;color:var(--flood)}
.prose p{margin-bottom:1rem}
.prose ul{margin:0 0 1rem;padding-left:0}
.prose ul li{position:relative;padding-left:1rem;margin-bottom:.45rem}
.prose ul li::before{content:"";position:absolute;left:0;top:.68em;width:6px;height:6px;background:var(--mint);transform:rotate(45deg)}
.prose a{color:var(--mint);text-decoration:underline;text-underline-offset:3px}
.prose strong{color:var(--flood)}

/* ---------- 8 图片容器基础（页面阶段放占位图） ---------- */
.media{
  position:relative;display:block;overflow:hidden;aspect-ratio:16/9;
  background:linear-gradient(160deg,var(--pitch-mid),var(--ink));
  border:1px solid var(--line);border-radius:var(--radius);
}
.media--wide{aspect-ratio:21/9}
.media--tall{aspect-ratio:3/4}
.media--square{aspect-ratio:1/1}
.media img,.media video{width:100%;height:100%;object-fit:cover}
.media--board::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(90deg, rgba(95,242,194,.10) 1px, transparent 1px),
    linear-gradient(rgba(95,242,194,.10) 1px, transparent 1px);
  background-size:48px 48px;
}
.media__scrim{
  position:absolute;left:0;right:0;bottom:0;padding:.75rem 1rem;
  background:linear-gradient(0deg, rgba(7,18,13,.88), rgba(7,18,13,0));
  font-family:var(--font-mono);font-size:.75rem;letter-spacing:.08em;color:var(--flood);
}
.media__badge{position:absolute;top:.75rem;left:.75rem}

/* ---------- 9 页头：居中刊头 ---------- */
.skip-link{
  position:absolute;top:0;left:0;z-index:200;
  padding:.7rem 1.1rem;background:var(--mint);color:var(--ink);
  font-size:.85rem;font-weight:700;border-radius:0 0 var(--radius) 0;
  transform:translateY(-140%);transition:transform var(--dur) var(--ease);
}
.skip-link:focus-visible{transform:translateY(0);outline-offset:-2px}

.site-header{
  position:sticky;top:0;z-index:60;
  background:linear-gradient(180deg, rgba(11,42,31,.985), rgba(11,42,31,.94));
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line);
}
.site-header__inner{width:min(100% - (var(--pad) * 2), var(--wrap));margin-inline:auto;padding-top:.55rem}

.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:95;pointer-events:none;
  transform-origin:0 50%;transform:scaleX(var(--scroll,0));
  background:linear-gradient(90deg,var(--mint),var(--accent));
  will-change:transform;
}

.header-top{
  display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:"utility brand actions";
  align-items:center;gap:.75rem;padding-block:.35rem .6rem;
}
.header-utility{grid-area:utility;display:flex;align-items:center;gap:.55rem;justify-self:start;min-width:0}
.header-actions{grid-area:actions;display:flex;align-items:center;gap:.5rem;justify-self:end}

.brand{
  grid-area:brand;display:inline-flex;flex-direction:column;align-items:center;
  text-align:center;color:var(--flood);padding-inline:.5rem;
}
.brand__name{font-family:var(--font-display);font-size:clamp(1.15rem,2vw,1.5rem);font-weight:700;letter-spacing:.14em;line-height:1.15}
.brand__sub{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.4em;color:var(--mint);margin-top:.18rem;padding-left:.4em}
.brand::after{content:"";display:block;width:40px;height:2px;margin-top:.4rem;background:var(--accent);transform:skewX(-12deg)}
.brand:hover .brand__name,.brand:focus-visible .brand__name{color:var(--mint)}

.league-switch{
  display:inline-flex;align-items:stretch;overflow:hidden;
  border:1px solid var(--line-strong);border-radius:var(--radius);
  background:rgba(7,18,13,.42);
}
.league-switch__btn{
  display:inline-flex;align-items:center;gap:.3rem;padding:.32rem .55rem;
  color:var(--text-soft);transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.league-switch__btn + .league-switch__btn{border-left:1px solid var(--line-strong)}
.league-switch__code{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;line-height:1}
.league-switch__cn{font-size:.66rem;letter-spacing:.04em;line-height:1}
.league-switch__btn[data-league-btn="csl"][aria-pressed="true"]{background:var(--csl);color:var(--ink)}
.league-switch__btn[data-league-btn="epl"][aria-pressed="true"]{background:var(--epl);color:var(--flood)}
.league-switch__btn:hover{color:var(--flood)}
.league-switch__btn[aria-pressed="true"]:hover{color:inherit}

.drawer-toggle{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.36rem .7rem;border:1px solid var(--line-strong);border-radius:999px;
  background:rgba(95,242,194,.07);color:var(--flood);
  font-size:.78rem;letter-spacing:.08em;line-height:1.2;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.drawer-toggle__dot{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 3px rgba(95,242,194,.16)}
.drawer-toggle:hover,.drawer-toggle:focus-visible{border-color:var(--mint);color:var(--mint)}
.drawer-toggle[aria-expanded="true"]{background:var(--mint);border-color:var(--mint);color:var(--ink)}
.drawer-toggle[aria-expanded="true"] .drawer-toggle__dot{background:var(--ink);box-shadow:0 0 0 3px rgba(7,18,13,.20)}

.nav-toggle{
  display:none;align-items:center;gap:.5rem;padding:.42rem .7rem;
  border:1px solid var(--line-strong);border-radius:var(--radius);
  color:var(--flood);font-size:.82rem;letter-spacing:.1em;
}
.nav-toggle__bars{position:relative;display:block;width:16px;height:2px;background:currentColor;transition:background var(--dur) var(--ease)}
.nav-toggle__bars::before,
.nav-toggle__bars::after{content:"";position:absolute;left:0;width:16px;height:2px;background:currentColor;transition:transform var(--dur) var(--ease),top var(--dur) var(--ease)}
.nav-toggle__bars::before{top:-6px}
.nav-toggle__bars::after{top:6px}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{top:0;transform:rotate(-45deg)}
.nav-toggle:hover,.nav-toggle:focus-visible{border-color:var(--mint);color:var(--mint)}

.site-nav{border-top:1px solid var(--line);margin-top:.15rem}
.site-nav__list{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0;padding-bottom:.2rem}
.site-nav__link{
  position:relative;display:inline-block;
  padding:.72rem clamp(.55rem,1.4vw,1.05rem);
  font-size:.95rem;letter-spacing:.06em;color:rgba(245,240,228,.82);
  transition:color var(--dur) var(--ease);
}
.site-nav__link::after{
  content:"";position:absolute;left:clamp(.55rem,1.4vw,1.05rem);right:clamp(.55rem,1.4vw,1.05rem);bottom:.42rem;
  height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left center;
  transition:transform var(--dur) var(--ease);
}
.site-nav__link:hover,.site-nav__link:focus-visible{color:var(--flood)}
.site-nav__link:hover::after,.site-nav__link:focus-visible::after{transform:scaleX(1)}
.site-nav__link[aria-current="page"]{color:var(--mint)}
.site-nav__link[aria-current="page"]::after{transform:scaleX(1);background:var(--mint)}

/* ---------- 10 关注列表抽屉 ---------- */
.follow-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:85;
  width:min(320px,88vw);display:flex;flex-direction:column;gap:.9rem;
  padding:1.15rem 1.15rem 1.6rem;overflow-y:auto;
  background:linear-gradient(180deg, rgba(20,77,54,.96), rgba(11,42,31,.98));
  border-left:1px solid var(--line-strong);
  box-shadow:-24px 0 60px rgba(7,18,13,.55);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  transform:translateX(102%);visibility:hidden;
  transition:transform var(--dur) var(--ease),visibility 0s linear var(--dur);
}
.follow-drawer[data-open="true"]{transform:none;visibility:visible;transition:transform var(--dur) var(--ease),visibility 0s}
.follow-drawer__head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding-bottom:.55rem;border-bottom:1px solid var(--line)}
.follow-drawer__title{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.28em;text-transform:uppercase;color:var(--mint)}
.drawer-close{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border:1px solid var(--line-strong);border-radius:var(--radius);
  color:var(--flood);font-size:1.1rem;line-height:1;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.drawer-close:hover,.drawer-close:focus-visible{border-color:var(--mint);color:var(--mint)}
.follow-drawer__note{font-size:.8rem;line-height:1.7;color:rgba(245,240,228,.66)}
.follow-drawer__list{display:flex;flex-direction:column}
.follow-drawer__link{
  display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;
  padding:.72rem .1rem;border-bottom:1px dashed var(--line);
  color:var(--flood);font-size:.92rem;letter-spacing:.04em;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.follow-drawer__link:hover,.follow-drawer__link:focus-visible{color:var(--mint);border-bottom-color:var(--mint)}
.follow-drawer__meta{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint)}

/* ---------- 11 页脚 ---------- */
.site-footer{
  position:relative;margin-top:clamp(2.5rem,6vw,5rem);
  background-color:var(--ink);
  background-image:repeating-linear-gradient(90deg, rgba(30,107,74,.28) 0 1px, transparent 1px 120px);
  color:var(--flood);border-top:1px solid var(--line);
}
.footer-league-bar{display:flex;height:6px;overflow:hidden;background:var(--epl)}
.footer-league-bar__csl{width:50%;background:var(--csl);clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%)}
.footer-league-bar__epl{flex:1 1 auto;background:var(--epl)}

.footer-main{
  display:grid;grid-template-columns:1.6fr .9fr .9fr .8fr 1.3fr;
  gap:clamp(1.25rem,3vw,2.25rem);
  padding-block:clamp(2.25rem,5vw,3.75rem);
}
.footer-brand__name{font-family:var(--font-display);font-size:1.2rem;font-weight:700;letter-spacing:.14em}
.footer-brand__sub{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.34em;color:var(--mint);margin-top:.25rem}
.footer-note{margin-top:.85rem;max-width:32ch;font-size:.82rem;line-height:1.8;color:rgba(245,240,228,.62)}
.footer-col__title{
  font-family:var(--font-mono);font-size:.68rem;line-height:1.4;
  letter-spacing:.26em;text-transform:uppercase;color:var(--parchment);
  padding-bottom:.55rem;margin-bottom:.55rem;border-bottom:1px solid var(--line);
}
.footer-links{display:flex;flex-direction:column;gap:.15rem}
.footer-link{
  display:inline-block;padding-block:.24rem;font-size:.88rem;
  color:rgba(245,240,228,.84);
  transition:color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.footer-link:hover,.footer-link:focus-visible{color:var(--mint);transform:translateX(4px)}
.footer-contact{display:flex;flex-direction:column;gap:.35rem}
.footer-contact__item{font-family:var(--font-mono);font-size:.74rem;line-height:1.7;letter-spacing:.02em;color:rgba(245,240,228,.66)}
.footer-col--contact{min-width:0}

.footer-bottom{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1.5rem;
  padding-block:1.1rem;border-top:1px solid var(--line);
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;color:rgba(245,240,228,.56);
}
.footer-copy{color:rgba(245,240,228,.56)}
.footer-legal{color:rgba(245,240,228,.72)}

/* ---------- 12 平板 ---------- */
@media (max-width:1024px){
  .grid--7-5,.grid--5-7,.grid--8-4,.grid--3{grid-template-columns:1fr}
  .footer-main{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-brand{grid-column:1 / -1}
}

/* ---------- 13 移动端 ---------- */
@media (max-width:900px){
  .header-top{grid-template-columns:1fr auto;grid-template-areas:"brand actions" "utility utility";gap:.5rem;align-items:center}
  .brand{align-items:flex-start;text-align:left;padding-inline:0}
  .brand__sub{letter-spacing:.3em}
  .nav-toggle{display:inline-flex}
  .header-utility{justify-self:stretch;justify-content:flex-start;padding-bottom:.35rem}

  .site-nav{
    max-height:0;opacity:0;overflow:hidden;
    border-top-color:transparent;
    transition:max-height var(--dur) var(--ease),opacity var(--dur) var(--ease),border-color var(--dur) var(--ease);
  }
  .site-nav[data-open="true"]{max-height:min(72vh,30rem);opacity:1;border-top-color:var(--line)}
  .site-nav__list{flex-direction:column;align-items:stretch;gap:0;padding-bottom:.6rem}
  .site-nav__list > li{width:100%}
  .site-nav__link{display:block;padding:.85rem .15rem;font-size:1rem;border-bottom:1px solid var(--line)}
  .site-nav__link::after{display:none}
  .site-nav__link[aria-current="page"]{color:var(--mint);border-bottom-color:rgba(95,242,194,.45)}

  .drawer-toggle{
    position:fixed;right:1rem;bottom:1rem;z-index:70;
    padding:.62rem .95rem;
    background:rgba(11,42,31,.94);border-color:var(--line-strong);
    box-shadow:0 12px 34px rgba(7,18,13,.55);
  }
  .follow-drawer{width:min(340px,92vw)}
}

@media (max-width:640px){
  .footer-main{grid-template-columns:1fr;gap:1.5rem}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  .league-switch__cn{display:none}
  .media--wide{aspect-ratio:16/9}
  .site-header__inner{padding-top:.45rem}
}

/* ---------- 14 无动画偏好 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0s !important;
  }
  .scroll-progress{transition:none}
  .footer-link:hover,.footer-link:focus-visible{transform:none}
}