/* ============ 万象城体育 · 共享外壳 /assets/site.css ============ */

/* ---------- 1. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,h5,p,ul,ol,li,figure,blockquote,dl,dd{margin:0}
ul,ol{list-style:none;padding:0}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
::selection{background:var(--cyan);color:var(--ink)}

/* ---------- 2. 设计变量 ---------- */
:root{
  --ink:#0B1220;
  --panel:#101B31;
  --brown:#1A1410;
  --paper:#F3EAD8;
  --cyan:#2BF0D6;
  --orange:#FF7A2F;
  --grad:linear-gradient(135deg,#B23AFF 0%,#FF3D8B 100%);
  --slate:#8DA2C0;
  --ink-text:#16110C;
  --green:#38E07B;
  --red:#E5484D;
  --rail-w:88px;
  --topbar-h:62px;
  --maxw:1280px;
  --gap:clamp(14px,1.6vw,22px);
  --hard:6px 6px 0 var(--brown);
  --hard-sm:3px 3px 0 var(--brown);
  --line:rgba(141,162,192,.22);
  --font-body:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display:"PingFang SC","Microsoft YaHei","Noto Sans SC","Heiti SC",system-ui,sans-serif;
  --font-data:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}

/* ---------- 3. 基础排版 ---------- */
html,body{min-height:100%}
body{
  font-family:var(--font-body);
  font-size:17px;line-height:1.9;color:var(--slate);
  background-color:var(--ink);
  background-image:
    linear-gradient(rgba(141,162,192,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(141,162,192,.055) 1px,transparent 1px);
  background-size:52px 52px;
  padding-left:var(--rail-w);
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:900;letter-spacing:-.02em;line-height:1.16;color:#fff}
h1{font-size:clamp(32px,4.4vw,64px)}
h2{font-size:clamp(26px,3vw,44px)}
h3{font-size:clamp(19px,2vw,26px)}
h4{font-size:17px}
p+p{margin-top:14px}

/* ---------- 4. 通用原语 ---------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,3vw,36px)}
.section{padding:clamp(36px,5vw,72px) 0}
.kicker{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-data);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--cyan)}
.kicker::before{content:"";width:22px;height:2px;background:var(--orange);display:block}
.annot{font-size:12.5px;letter-spacing:.18em;color:var(--slate);writing-mode:vertical-rl;text-orientation:mixed}
.stat{display:block;font-family:var(--font-data);font-size:clamp(32px,4vw,56px);line-height:1;letter-spacing:-.02em;color:var(--cyan)}
.stat--orange{color:var(--orange)}
.dot-live{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 0 rgba(43,240,214,.7);animation:pulse 1.8s infinite}
@keyframes pulse{
  70%{box-shadow:0 0 0 10px rgba(43,240,214,0)}
  100%{box-shadow:0 0 0 0 rgba(43,240,214,0)}
}
.tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.12em;padding:3px 10px;border:2px solid var(--brown);background:var(--paper);color:var(--ink-text);box-shadow:2px 2px 0 var(--brown)}
.tag--quiet{background:transparent;color:var(--cyan);border-color:var(--cyan);box-shadow:none}
.tag--live{background:var(--grad);color:#fff;border-color:var(--brown)}

/* Bento 网格 */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.bento>*{min-width:0}
.span-3{grid-column:span 3}
.span-4{grid-column:span 4}
.span-5{grid-column:span 5}
.span-6{grid-column:span 6}
.span-7{grid-column:span 7}
.span-8{grid-column:span 8}
.span-12{grid-column:span 12}

/* 资料卡与纸面 */
.card{position:relative;background:var(--panel);border:2px solid var(--brown);box-shadow:var(--hard);padding:clamp(16px,1.6vw,22px);transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-4px);box-shadow:6px 6px 0 var(--brown),0 0 0 2px var(--cyan)}
.card--paper{background:var(--paper);color:var(--ink-text)}
.card--tint{background:#0E1A2E}
.paper{background:var(--paper);color:var(--ink-text);border:3px solid var(--brown);box-shadow:8px 8px 0 var(--brown);padding:clamp(24px,3vw,44px)}
.paper h1,.paper h2,.paper h3,.paper h4{color:#000}
.paper a{color:#000;text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:3px}
.longform{max-width:76ch;font-size:17.5px;line-height:1.9}
.longform h2{margin-top:1.4em}

/* 面包屑与斜向过渡 */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px 0;font-size:12.5px;letter-spacing:.1em;color:var(--slate)}
.crumbs a:hover,.crumbs a:focus-visible{color:var(--cyan)}
.crumbs [aria-current="page"]{color:var(--paper)}
.crumbs span[aria-hidden]{opacity:.5}
.slash{position:relative;height:clamp(28px,4vw,56px);overflow:hidden;margin:clamp(20px,3vw,44px) 0}
.slash::before{content:"";position:absolute;left:-4%;right:-4%;top:50%;height:34px;transform:rotate(-6deg);background:linear-gradient(90deg,rgba(43,240,214,.18),rgba(255,122,47,.18));border-top:2px solid var(--brown);border-bottom:2px solid var(--brown)}

/* 图片容器 */
.media-frame{position:relative;overflow:hidden;border:2px solid var(--brown);box-shadow:var(--hard);aspect-ratio:16/9;background:
  linear-gradient(135deg,rgba(43,240,214,.10),rgba(178,58,255,.10)),
  repeating-linear-gradient(-45deg,#0E1A2E 0 12px,#101B31 12px 24px)}
.media-frame img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.05)}
.media-frame::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(to top,rgba(11,18,32,.78),rgba(11,18,32,0));pointer-events:none}
.media-frame--wide{aspect-ratio:21/9}
.media-frame--tall{aspect-ratio:3/4}
.media-frame--square{aspect-ratio:1/1}
.media-frame__cap{position:absolute;left:12px;bottom:10px;z-index:2;font-size:12px;letter-spacing:.1em;color:var(--cyan)}

/* Ticker */
.ticker{position:relative;overflow:hidden;background:var(--brown);border-top:2px solid rgba(43,240,214,.35);border-bottom:2px solid rgba(43,240,214,.35)}
.ticker__track{display:flex;gap:36px;width:max-content;padding:10px 0;white-space:nowrap;animation:ticker 60s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__item{font-family:var(--font-data);font-size:13px;letter-spacing:.08em;color:var(--cyan)}
.ticker__item--hot{color:var(--orange)}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

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

/* ---------- 5. 按钮 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;font-family:var(--font-body);font-size:14px;font-weight:800;letter-spacing:.04em;line-height:1.4;text-align:center;color:var(--ink-text);background:var(--paper);border:2px solid var(--brown);box-shadow:4px 4px 0 var(--brown);transition:transform .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--brown)}
.btn:active{transform:translate(0,0);box-shadow:2px 2px 0 var(--brown)}
.btn--cta{background:var(--orange);color:var(--ink-text)}
.btn--cta:hover{background:#FF8E4D}
.btn--ghost{background:transparent;color:var(--paper);border-color:var(--cyan);box-shadow:4px 4px 0 rgba(43,240,214,.28)}
.btn--ghost:hover{background:rgba(43,240,214,.12);color:var(--cyan)}

/* ---------- 6. 头部外壳 ---------- */
.skip-link{position:fixed;top:10px;left:50%;z-index:200;transform:translate(-50%,-220%);padding:10px 18px;font-size:14px;font-weight:800;color:var(--ink-text);background:var(--cyan);border:2px solid var(--brown);box-shadow:var(--hard-sm);transition:transform .18s ease}
.skip-link:focus{transform:translate(-50%,0)}

.site-header{position:fixed;top:0;bottom:0;left:0;width:var(--rail-w);z-index:60}

/* 左侧轨道 */
.rail{display:flex;flex-direction:column;height:100%;overflow-y:auto;overflow-x:hidden;background:var(--panel);border-right:3px solid var(--brown);box-shadow:6px 0 0 rgba(26,20,16,.85);scrollbar-width:thin}
.rail__brand{padding:18px 10px 14px;border-bottom:2px dashed var(--line)}
.brand{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.brand__mark{display:grid;place-items:center;width:42px;height:42px;font-size:20px;font-weight:900;color:var(--ink);background:var(--grad);border:2px solid var(--brown);box-shadow:var(--hard-sm)}
.brand__name{font-family:var(--font-display);font-size:15px;font-weight:900;line-height:1.25;letter-spacing:.06em;color:var(--paper)}
.brand__tag{font-size:11px;line-height:1.5;letter-spacing:.04em;color:var(--cyan)}
.rail__nav{flex:1 1 auto;padding:10px 0}
.nav-list{display:flex;flex-direction:column}
.nav-item{display:block}
.nav-link{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;font-size:12.5px;line-height:1.3;color:var(--slate);transition:color .16s ease,background .16s ease}
.nav-link::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;background:transparent;transition:background .16s ease}
.nav-link__no{font-family:var(--font-data);font-size:10.5px;letter-spacing:.12em;color:var(--orange)}
.nav-link__label{text-align:center;letter-spacing:.04em}
.nav-link__fly{max-height:0;overflow:hidden;opacity:0;font-size:10.5px;letter-spacing:.08em;color:var(--cyan);transition:max-height .2s ease,opacity .2s ease,margin-top .2s ease}
.nav-link:hover,.nav-link:focus-visible{color:var(--paper);background:rgba(43,240,214,.07)}
.nav-link:hover .nav-link__fly,.nav-link:focus-visible .nav-link__fly{max-height:26px;opacity:1;margin-top:2px}
.nav-link[aria-current="page"]{color:var(--paper);background:rgba(43,240,214,.1)}
.nav-link[aria-current="page"]::before{background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.nav-link[aria-current="page"] .nav-link__label{font-weight:800}
.rail__foot{display:flex;flex-direction:column;align-items:center;gap:12px;padding:14px 10px 20px;border-top:2px dashed var(--line)}
.rail__cta{writing-mode:vertical-rl;padding:16px 9px;font-size:13px;letter-spacing:.18em}
.rail__utility{display:flex;flex-direction:column;align-items:center;gap:6px}
.rail__utility a{font-size:11px;letter-spacing:.04em;color:var(--slate);padding:2px 0;border-bottom:1px solid transparent;transition:color .16s ease,border-color .16s ease}
.rail__utility a:hover,.rail__utility a:focus-visible{color:var(--cyan);border-color:var(--cyan)}
.rail__note{font-size:10.5px;letter-spacing:.14em;color:rgba(141,162,192,.72)}

/* 顶部横杆（移动端） */
.topbar{display:none}
.topbar__brand{display:flex;flex-direction:column;line-height:1.2}
.topbar__name{font-family:var(--font-display);font-size:17px;font-weight:900;letter-spacing:.02em;color:var(--paper)}
.topbar__tag{font-size:10.5px;letter-spacing:.14em;color:var(--cyan)}
.nav-toggle{display:inline-flex;align-items:center;gap:10px;padding:8px 12px;font-size:13px;font-weight:800;letter-spacing:.1em;color:var(--paper);background:var(--panel);border:2px solid var(--brown);box-shadow:var(--hard-sm)}
.nav-toggle__bars{display:flex;flex-direction:column;gap:3px;width:18px}
.nav-toggle__bars span{display:block;height:2px;background:var(--cyan);transition:transform .18s ease,opacity .18s ease}
.site-header[data-open] .nav-toggle__bars span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.site-header[data-open] .nav-toggle__bars span:nth-child(2){opacity:0}
.site-header[data-open] .nav-toggle__bars span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* 抽屉 */
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:72;display:flex;flex-direction:column;width:min(86vw,360px);padding:18px 18px 24px;overflow-y:auto;background:var(--panel);border-left:3px solid var(--brown);box-shadow:-8px 0 0 rgba(26,20,16,.6);transform:translateX(105%);visibility:hidden;transition:transform .26s ease,visibility .26s ease}
.site-header[data-open] .drawer{transform:translateX(0);visibility:visible}
.drawer__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:2px dashed var(--line)}
.drawer__title{font-family:var(--font-data);font-size:12px;letter-spacing:.24em;color:var(--cyan)}
.drawer__nav{margin-top:10px}
.drawer .nav-link{flex-direction:row;align-items:center;gap:14px;padding:13px 12px;font-size:15px;color:var(--paper);border-bottom:1px solid var(--line)}
.drawer .nav-link__label{text-align:left;font-size:15px}
.drawer .nav-link__no{font-size:11px}
.drawer .nav-link__fly{display:none}
.drawer .nav-link:hover,.drawer .nav-link:focus-visible{background:rgba(43,240,214,.09)}
.drawer__utility{display:flex;flex-wrap:wrap;gap:12px;padding:18px 12px 0}
.drawer__utility a{font-size:12.5px;color:var(--slate);border-bottom:1px solid rgba(141,162,192,.42);padding-bottom:2px}
.drawer__utility a:hover,.drawer__utility a:focus-visible{color:var(--cyan);border-color:var(--cyan)}
.drawer__cta{width:calc(100% - 24px);margin:20px 12px 0}
.drawer-scrim{position:fixed;inset:0;z-index:70;background:rgba(11,18,32,.72);opacity:0;pointer-events:none;transition:opacity .24s ease}
.site-header[data-open] .drawer-scrim{opacity:1;pointer-events:auto}

/* 阅读进度 */
.progress{position:fixed;top:0;left:var(--rail-w);right:0;height:3px;z-index:90;pointer-events:none}
.progress__bar{display:block;width:100%;height:100%;background:var(--grad);box-shadow:0 0 12px rgba(43,240,214,.55);transform:scaleX(0);transform-origin:0 50%}

/* ---------- 7. 页脚 ---------- */
.site-footer{position:relative;margin-top:clamp(48px,6vw,96px);background:var(--brown);border-top:4px solid var(--cyan);color:var(--slate)}
.site-footer::before{content:"";position:absolute;top:-4px;left:0;right:0;height:4px;background:var(--grad)}
.footer__inner{max-width:var(--maxw);margin:0 auto;padding:clamp(32px,4vw,56px) clamp(16px,3vw,36px) 28px}
.footer__top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 28px;padding-bottom:24px;border-bottom:2px dashed rgba(141,162,192,.28)}
.footer__mark{font-family:var(--font-display);font-size:clamp(28px,3.4vw,44px);font-weight:900;line-height:1;letter-spacing:-.02em;color:var(--paper)}
.footer__slogan{margin-top:10px;font-size:13px;letter-spacing:.16em;color:var(--cyan)}
.footer__totop{flex:0 0 auto}
.footer__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.4vw,40px);padding:28px 0}
.footer__col{min-width:0}
.footer__col-title{display:flex;align-items:center;gap:8px;margin-bottom:14px;font-size:13px;font-weight:800;letter-spacing:.2em;color:var(--paper)}
.footer__col-title::before{content:"";width:8px;height:8px;background:var(--orange);display:block}
.footer__links{display:flex;flex-direction:column;gap:10px;font-size:14.5px}
.footer__links a{width:fit-content;color:var(--slate);border-bottom:1px solid transparent;transition:color .16s ease,border-color .16s ease,padding-left .16s ease}
.footer__links a:hover,.footer__links a:focus-visible{color:var(--cyan);border-color:var(--cyan);padding-left:6px}
.footer__meta{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;padding-top:20px;border-top:2px solid rgba(141,162,192,.2)}
.footer__contact{display:flex;flex-direction:column;gap:8px;font-size:13px}
.footer__service{color:var(--paper)}
.footer__note{font-size:12.5px;color:rgba(141,162,192,.85)}
.footer__legal{font-size:12.5px;color:var(--slate)}
.footer__copy{font-family:var(--font-data);font-size:12.5px;letter-spacing:.06em;color:rgba(141,162,192,.8)}

/* ---------- 8. 响应式 ---------- */
@media (max-height:780px) and (min-width:961px){
  .nav-link{padding:9px 6px;font-size:12px}
  .brand__tag{display:none}
  .rail__cta{font-size:12px;padding:12px 8px}
}
@media (max-width:1100px){
  .bento{grid-template-columns:repeat(6,minmax(0,1fr))}
  .span-3,.span-4,.span-5{grid-column:span 3}
  .span-6,.span-7,.span-8,.span-12{grid-column:span 6}
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  body{padding-left:0;padding-top:var(--topbar-h)}
  .site-header{top:0;right:0;bottom:auto;left:0;width:auto;height:var(--topbar-h)}
  .rail{display:none}
  .topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;height:100%;padding:0 14px;background:var(--panel);border-bottom:3px solid var(--brown)}
  .progress{left:0}
  .slash::before{left:-8%;right:-8%}
}
@media (min-width:961px){
  .drawer,.drawer-scrim{display:none}
}
@media (max-width:640px){
  body{font-size:16.5px}
  .bento{grid-template-columns:1fr}
  .bento>*{grid-column:span 1}
  .footer__grid{grid-template-columns:1fr;gap:22px}
  .footer__top{align-items:flex-start}
  .footer__totop{width:100%}
}
@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__track{animation:none}
  html.js-ready [data-reveal]{opacity:1!important;transform:none!important}
}