*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--night:#0B1026;--deep:#1A2A6C;--snow:#F5F7FA;--red:#D93B4D;--gold:#F2C14E;--green:#2E9E6B;--blue:#3B8ED0;--violet:#4A3B8F;--mist:#E8ECF5;
--ink:rgba(245,247,250,.92);--muted:rgba(245,247,250,.60);--line:rgba(139,148,186,.28);
--serif:"Noto Serif CJK SC","Noto Serif SC","Source Han Serif SC","Songti SC",SimSun,Georgia,serif;
--sans:"Noto Sans CJK SC","Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
--mono:"Roboto Mono",ui-monospace,SFMono-Regular,"SF Mono",Consolas,"Liberation Mono",monospace;
--header-h:76px;--container:1280px;--radius:3px;--cut:16px;--space-1:8px;--space-2:16px;--space-3:24px;--space-4:40px;--space-5:64px;--space-6:96px;
--ease:cubic-bezier(.22,.61,.36,1);--shadow-card:0 18px 40px rgba(0,0,0,.38);
--z-progress:240;--z-header:100;--z-backdrop:210;--z-drawer:220;--z-skip:300}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;background-color:var(--night)}
body{min-height:100vh;font-family:var(--sans);font-size:1rem;line-height:1.75;color:var(--ink);background:var(--night);overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
radial-gradient(circle at 82% 8%,rgba(59,142,208,.14),transparent 42%),
radial-gradient(circle at 12% 88%,rgba(46,158,107,.10),transparent 40%),
radial-gradient(circle at 55% 45%,rgba(74,59,143,.16),transparent 55%)}
p{overflow-wrap:break-word}
a{color:var(--blue)}
ul,ol{padding-left:1.4em}
h1,h2,h3,h4{font-family:var(--serif);color:var(--snow);line-height:1.25}
::selection{background:var(--gold);color:var(--night);text-shadow:none}
img{max-width:100%;display:block}
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--space-4)}
.section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-2) var(--space-4);margin-bottom:var(--space-4)}
.section-title{margin:0;font-size:clamp(1.45rem,3vw,2.2rem);font-weight:800}
.section-note{margin:0;color:var(--muted);font-size:.84rem}
.chapter{display:grid;grid-template-columns:minmax(90px,150px) 1fr;gap:var(--space-2) var(--space-5);padding-block:var(--space-5);border-bottom:1px solid var(--line)}
.chapter-index{font-family:var(--serif);font-weight:900;font-size:clamp(2.4rem,5vw,4.2rem);line-height:.9;color:transparent;-webkit-text-stroke:1px rgba(74,59,143,.8)}
.chapter-title{margin:0 0 var(--space-2);font-size:clamp(1.3rem,2.4vw,2rem);font-weight:800;text-shadow:0 1px 0 rgba(255,255,255,.12),0 -1px 0 rgba(0,0,0,.55),0 4px 14px rgba(11,16,38,.55)}
.chapter-lead{max-width:52ch;color:var(--muted);font-size:.95rem}
.breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding-block:var(--space-3);font-size:.82rem;color:var(--muted);list-style:none}
.breadcrumbs a{color:var(--blue);text-decoration:none}
.breadcrumbs a:hover{color:var(--gold)}
.breadcrumbs [aria-current="page"]{color:var(--snow)}
.stripe{display:block;width:100%;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--red) 0 20%,var(--gold) 20% 40%,var(--deep) 40% 60%,var(--green) 60% 80%,var(--blue) 80% 100%)}
.slant{display:block;width:100%;height:10px;background:linear-gradient(100deg,transparent 0%,rgba(74,59,143,.45) 22%,rgba(242,193,78,.5) 46%,rgba(217,59,77,.42) 68%,transparent 92%);clip-path:polygon(0 45%,100% 0,100% 55%,0 100%)}
.grid{display:grid;gap:var(--space-4)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 22px;border:1px solid transparent;border-radius:999px;font-family:var(--sans);font-size:.9rem;font-weight:600;line-height:1.4;text-decoration:none;cursor:pointer;transition:transform .2s var(--ease),background-color .2s,color .2s,border-color .2s,box-shadow .2s}
.btn:active{transform:scale(.97)}
.btn--gold{background:linear-gradient(135deg,var(--gold),#F7D579);color:var(--night)}
.btn--gold:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(242,193,78,.25);color:var(--night)}
.btn--ghost{background:rgba(245,247,250,.04);border-color:var(--line);color:var(--snow)}
.btn--ghost:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)}
.btn--block{display:flex;width:100%}
.tag{display:inline-flex;align-items:center;gap:4px;padding:3px 11px;border-radius:999px;border:1px solid transparent;font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.04em;line-height:1.5;white-space:nowrap}
.tag--red{color:var(--red);background:rgba(217,59,77,.12);border-color:rgba(217,59,77,.5)}
.tag--gold{color:var(--gold);background:rgba(242,193,78,.1);border-color:rgba(242,193,78,.45)}
.tag--green{color:var(--green);background:rgba(46,158,107,.12);border-color:rgba(46,158,107,.48)}
.tag--blue{color:var(--blue);background:rgba(59,142,208,.12);border-color:rgba(59,142,208,.48)}
.media-frame{position:relative;overflow:hidden;aspect-ratio:16/9;background:linear-gradient(135deg,rgba(26,42,108,.35),rgba(11,16,38,.85)),repeating-linear-gradient(90deg,transparent 0 32px,rgba(245,247,250,.05) 32px 33px);border:1px solid var(--line)}
.media-frame--tall{aspect-ratio:3/4}
.media-frame--wide{aspect-ratio:21/9}
.media-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media-frame::after{content:"球盟会竞界 · QMH";position:absolute;right:10px;bottom:10px;padding:2px 8px;background:rgba(11,16,38,.72);border:1px solid rgba(245,247,250,.16);font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;color:rgba(245,247,250,.6)}
.skip-link{position:fixed;top:-72px;left:var(--space-2);z-index:var(--z-skip);padding:10px 18px;background:var(--gold);color:var(--night);font-weight:700;font-size:.86rem;text-decoration:none;border-radius:0 0 6px 6px;box-shadow:0 4px 18px rgba(0,0,0,.35);transition:top .22s var(--ease)}
.skip-link:focus-visible{top:0}
.site-header{position:sticky;top:0;z-index:var(--z-header);background:rgba(11,16,38,.84);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--red) 0 8%,var(--gold) 8% 18%,var(--green) 18% 30%,var(--blue) 30% 48%,transparent 72%);opacity:.8}
.header-inner{max-width:var(--container);margin-inline:auto;height:var(--header-h);padding-inline:var(--space-4);display:flex;align-items:center;gap:var(--space-3)}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}
.brand-mark{display:inline-flex;align-items:center;justify-content:center;padding:3px 9px 2px;background:linear-gradient(135deg,var(--gold),#F7D579);color:var(--night);font-family:var(--serif);font-weight:900;font-size:.9rem;letter-spacing:.03em;clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.brand-text{display:flex;flex-direction:column;line-height:1.2}
.brand-name{font-family:var(--serif);font-weight:800;font-size:1.12rem;letter-spacing:.05em;color:var(--snow);text-shadow:0 1px 0 rgba(255,255,255,.1),0 -1px 0 rgba(0,0,0,.55),0 2px 10px rgba(0,0,0,.4)}
.brand-sub{margin-top:2px;font-size:.64rem;letter-spacing:.18em;color:var(--muted)}
.brand-badge{align-self:center;padding:2px 9px;border-radius:999px;border:1px solid rgba(245,247,250,.22);background:linear-gradient(135deg,var(--red),#B42335);color:var(--snow);font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.03em;animation:badge-pulse 2.6s ease-out infinite}
.main-nav{margin-left:auto}
.nav-list{display:flex;align-items:center;gap:2px;list-style:none;padding:0;margin:0}
.nav-list a{position:relative;display:block;padding:8px 13px;color:var(--muted);font-size:.9rem;text-decoration:none;white-space:nowrap;transition:color .2s}
.nav-list a::after{content:"";position:absolute;left:50%;right:50%;bottom:2px;height:2px;background:linear-gradient(90deg,var(--red),var(--gold));transition:left .25s var(--ease),right .25s var(--ease)}
.nav-list a:hover{color:var(--snow)}
.nav-list a:hover::after,.nav-list a[aria-current="page"]::after{left:13px;right:13px}
.nav-list a[aria-current="page"]{color:var(--snow);font-weight:600}
.header-actions{display:flex;align-items:center;flex-shrink:0}
.nav-toggle{position:relative;display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;border:1px solid rgba(242,193,78,.4);background:radial-gradient(circle at 32% 28%,#3b4a86 0%,var(--deep) 38%,var(--night) 92%);color:var(--snow);cursor:pointer;box-shadow:0 4px 18px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08);transition:transform .22s var(--ease),border-color .22s,background .22s}
.nav-toggle::before{content:"";position:absolute;inset:-6px;border:1px dashed rgba(242,193,78,.35);border-radius:50%;animation:orbit 16s linear infinite}
.nav-toggle:hover{transform:translateY(-2px);border-color:var(--gold)}
.nav-toggle[aria-expanded="true"]{border-color:var(--gold);background:radial-gradient(circle at 68% 32%,#4A3B8F 0%,var(--deep) 55%,var(--night) 95%)}
.ball-glyph{width:19px;height:19px;border-radius:50%;background:radial-gradient(circle at 35% 28%,var(--red) 0 2.6px,transparent 3px),radial-gradient(circle at 68% 62%,var(--gold) 0 2.6px,transparent 3px),linear-gradient(90deg,transparent 46%,rgba(245,247,250,.72) 46% 54%,transparent 54%),linear-gradient(0deg,transparent 46%,rgba(245,247,250,.72) 46% 54%,transparent 54%);opacity:.95}
.drawer-backdrop{position:fixed;inset:0;z-index:var(--z-backdrop);background:rgba(3,6,18,.62);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .32s var(--ease),visibility .32s}
.drawer-backdrop[data-open="true"]{opacity:1;visibility:visible;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:var(--z-drawer);width:min(384px,88vw);overflow-y:auto;-webkit-overflow-scrolling:touch;border-left:1px solid var(--line);background:linear-gradient(160deg,rgba(26,42,108,.62),rgba(11,16,38,.98) 58%),radial-gradient(circle at 100% 0%,rgba(242,193,78,.08),transparent 46%);box-shadow:-24px 0 56px rgba(0,0,0,.42);transform:translateX(105%);visibility:hidden;transition:transform .42s var(--ease),visibility .42s}
.drawer[data-open="true"]{transform:translateX(0);visibility:visible}
.drawer-inner{display:flex;flex-direction:column;min-height:100%;padding:var(--space-4)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);margin-bottom:var(--space-4)}
.drawer-kicker{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.drawer-close{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:rgba(245,247,250,.06);color:var(--snow);font-size:1.05rem;cursor:pointer;transition:transform .22s var(--ease),border-color .22s}
.drawer-close:hover{border-color:var(--gold);transform:rotate(90deg)}
.drawer-nav{margin-bottom:var(--space-4)}
.drawer-list{list-style:none;margin:0;padding:0}
.drawer-list li+li{border-top:1px solid rgba(139,148,186,.14)}
.drawer-list a{display:block;padding:13px 4px 13px 8px;border-left:3px solid transparent;color:var(--ink);font-size:.95rem;text-decoration:none;transition:color .2s,border-color .2s,padding-left .2s,background .2s}
.drawer-list a:hover{color:var(--gold);border-left-color:var(--gold);padding-left:14px}
.drawer-list a[aria-current="page"]{color:var(--gold);border-left-color:var(--gold);background:linear-gradient(90deg,rgba(242,193,78,.12),transparent)}
.drawer-foot{margin-top:auto;display:grid;gap:var(--space-3);padding-top:var(--space-4);border-top:1px solid var(--line)}
.drawer-status{display:flex;flex-wrap:wrap;gap:6px}
.drawer-note{margin:0;font-size:.8rem;line-height:1.65;color:var(--muted)}
.scroll-progress{position:fixed;top:0;left:0;z-index:var(--z-progress);width:100%;height:3px;background-image:linear-gradient(90deg,var(--red) 0 22%,var(--gold) 22% 42%,var(--green) 42% 64%,var(--blue) 64% 100%);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.site-footer{margin-top:var(--space-6);background:linear-gradient(180deg,#060A1A,#04060F);border-top:1px solid var(--line)}
.footer-accent{display:block;height:3px;background:linear-gradient(90deg,var(--red) 0 16%,var(--gold) 16% 32%,var(--green) 32% 48%,var(--blue) 48% 64%,transparent 64%)}
.footer-inner{max-width:var(--container);margin-inline:auto;padding:var(--space-5) var(--space-4) var(--space-4);display:grid;grid-template-columns:2fr 1fr 1.2fr;gap:var(--space-5)}
.footer-col{min-width:0}
.footer-brand{display:grid;gap:var(--space-2);align-content:start}
.footer-logo{margin:0;font-family:var(--serif);font-weight:900;font-size:1.35rem;letter-spacing:.06em;color:var(--snow)}
.footer-logo span{color:var(--gold)}
.footer-desc{margin:0;max-width:42ch;font-size:.88rem;color:var(--muted)}
.footer-trust{margin:var(--space-2) 0 0;padding:var(--space-2) var(--space-3);border-left:2px solid var(--violet);background:rgba(26,42,108,.22);font-size:.8rem;line-height:1.7;color:rgba(245,247,250,.62)}
.footer-nav{display:grid;align-content:start;gap:var(--space-2)}
.footer-title{margin:0 0 var(--space-2);font-family:var(--serif);font-size:.84rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.footer-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.footer-list a{color:var(--muted);font-size:.9rem;text-decoration:none;transition:color .2s}
.footer-list a:hover{color:var(--blue)}
.footer-contact{display:grid;align-content:start;gap:var(--space-2)}
.footer-contact .footer-list{color:var(--muted);font-size:.88rem;line-height:1.6}
.footer-bottom{border-top:1px solid var(--line);padding:var(--space-3) var(--space-4);display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2) var(--space-4);font-family:var(--mono);font-size:.76rem;color:rgba(245,247,250,.48);text-align:center}
.footer-bottom p{margin:0}
.footer-bottom a{color:var(--muted);text-decoration:none}
.footer-bottom a:hover{color:var(--blue)}
.data-table-wrap{max-height:520px;overflow-y:auto;border:1px solid var(--violet);background:rgba(11,16,38,.55);box-shadow:var(--shadow-card)}
.data-table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:.86rem}
.data-table th,.data-table td{padding:10px 14px;text-align:left;white-space:nowrap}
.data-table thead th{position:sticky;top:0;z-index:2;background:var(--deep);border-bottom:2px solid var(--violet);color:var(--snow);font-weight:600}
.data-table tbody td{border-bottom:1px solid rgba(74,59,143,.35);color:var(--ink)}
.data-table tbody tr:nth-child(even) td{background:rgba(26,42,108,.28)}
.data-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.data-table .score-high{color:var(--red);font-weight:700}
.data-table .score-good{color:var(--green);font-weight:700}
.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-2)}
.stat-value{display:block;font-family:var(--mono);font-size:1.55rem;font-weight:800;line-height:1.2;color:var(--snow);font-variant-numeric:tabular-nums}
.stat-value--red{color:var(--red)}
.stat-value--green{color:var(--green)}
.stat-label{display:block;margin-top:2px;font-size:.72rem;letter-spacing:.08em;color:var(--muted)}
.match-card{position:relative;padding:var(--space-3);background:linear-gradient(150deg,rgba(26,42,108,.55),rgba(11,16,38,.92) 72%);border:1px solid var(--line);clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%);box-shadow:var(--shadow-card);overflow:hidden}
.match-card::before{content:"";position:absolute;inset:6px;border:1px solid rgba(242,193,78,.16);clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);pointer-events:none}
.match-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);margin-bottom:var(--space-2)}
.match-teams{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--space-2)}
.match-team{font-size:.88rem;font-weight:600;color:var(--snow)}
.match-team--home{text-align:right}
.match-score{display:inline-block;padding:2px 10px;background:var(--night);border:1px solid var(--violet);font-family:var(--mono);font-size:1.7rem;font-weight:800;letter-spacing:.06em;color:var(--snow);line-height:1.25}
.match-meta{display:flex;justify-content:space-between;gap:var(--space-2);margin-top:var(--space-2);font-family:var(--mono);font-size:.7rem;color:var(--muted)}
.tabs-list{display:flex;flex-wrap:wrap;gap:2px;border-bottom:1px solid var(--line)}
.tab-btn{appearance:none;background:transparent;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;padding:10px 18px;font-family:var(--sans);font-size:.9rem;color:var(--muted);cursor:pointer;transition:color .2s,border-color .2s}
.tab-btn:hover{color:var(--snow)}
.tab-btn[aria-selected="true"]{color:var(--gold);border-bottom-color:var(--gold);font-weight:600}
.tab-panel{padding-block:var(--space-3)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@keyframes orbit{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes badge-pulse{50%{box-shadow:0 0 0 6px rgba(217,59,77,0)}}
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation:none !important;transition:none !important}
.nav-toggle::before{animation:none}
.scroll-progress{display:none}}
@media (max-width:960px){
.grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
.chapter{grid-template-columns:72px 1fr;gap:var(--space-2) var(--space-3)}
.chapter-index{font-size:clamp(2rem,7vw,3.2rem)}}
@media (max-width:900px){
:root{--header-h:64px}
.main-nav{display:none}
.header-inner{padding-inline:var(--space-3)}
.brand-name{font-size:1rem}
.brand-badge{font-size:.64rem}
.footer-inner{grid-template-columns:1fr;gap:var(--space-4);padding:var(--space-4) var(--space-3)}}
@media (max-width:640px){
.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.container{padding-inline:var(--space-3)}
.chapter{grid-template-columns:1fr;gap:var(--space-1) var(--space-2)}
.section-head{align-items:flex-start;flex-direction:column;gap:var(--space-1)}}
@media (max-width:480px){
.brand-sub{display:none}
.brand-badge{padding:1px 7px}
.nav-toggle{width:42px;height:42px}
.drawer-inner{padding:var(--space-3)}}