/* 凤凰体育中心 · /assets/site.css —— 共享外壳与基础组件 */

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

/* ---------- 2. Tokens ---------- */
:root{
  --phx-rail-w:264px;
  --phx-topbar-h:56px;

  --phx-night:#0B1220;
  --phx-night-deep:#050810;
  --phx-bone:#F5F1EA;
  --phx-ink:#111214;
  --phx-flame:#FF5A1F;
  --phx-red:#A8121F;
  --phx-brass:#C89B3C;
  --phx-brass-lite:#E4C98A;
  --phx-turf:#123A2B;
  --phx-gray:#6C7480;
  --phx-gray-ink:#5A6068;
  --phx-mist:#E7E3DA;

  --phx-bg:var(--phx-bone);
  --phx-fg:var(--phx-ink);
  --phx-muted:var(--phx-gray-ink);
  --phx-line:rgba(17,18,20,.16);
  --phx-line-strong:rgba(17,18,20,.34);
  --phx-row-alt:rgba(18,58,43,.08);
  --phx-accent-ink:var(--phx-red);
  --phx-shadow:0 1px 2px rgba(5,8,16,.06),0 18px 34px -28px rgba(5,8,16,.55);

  --phx-font-title:"Noto Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --phx-font-body:var(--phx-font-title);
  --phx-font-mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;

  --phx-ease:cubic-bezier(.2,.7,.25,1);
}
html[data-theme="night"]{
  color-scheme:dark;
  --phx-bg:var(--phx-night);
  --phx-fg:var(--phx-bone);
  --phx-muted:var(--phx-gray);
  --phx-line:rgba(231,227,218,.18);
  --phx-line-strong:rgba(231,227,218,.34);
  --phx-row-alt:rgba(231,227,218,.05);
  --phx-accent-ink:var(--phx-flame);
}

/* ---------- 3. Base ---------- */
body{
  padding-top:var(--phx-topbar-h);
  background:var(--phx-bg);
  color:var(--phx-fg);
  font-family:var(--phx-font-body);
  font-size:17px;
  font-weight:400;
  line-height:1.85;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
@media (min-width:1000px){
  body{padding-top:0;padding-left:var(--phx-rail-w)}
}
:focus-visible{outline:2px solid var(--phx-flame);outline-offset:2px}
.phx-rail :focus-visible,.phx-foot :focus-visible{outline-color:var(--phx-brass-lite)}
.phx-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 4. Skip link ---------- */
.phx-skip{
  position:absolute;left:10px;top:-70px;z-index:99;
  padding:10px 16px;background:var(--phx-flame);color:#0B1220;
  font-family:var(--phx-font-title);font-weight:700;font-size:14px;
  transition:top .18s var(--phx-ease);
}
.phx-skip:focus{top:8px}

/* ---------- 5. Header / rail ---------- */
.phx-rail{
  position:fixed;z-index:60;top:0;left:0;
  display:flex;flex-direction:column;
  width:100%;height:var(--phx-topbar-h);
  background:var(--phx-night-deep);
  color:var(--phx-mist);
  border-bottom:1px solid rgba(200,155,60,.28);
}
.phx-rail__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  height:var(--phx-topbar-h);padding:0 14px 0 16px;
}
.phx-brand{display:flex;flex-direction:column;min-width:0;gap:1px}
.phx-brand__mark{
  position:relative;padding-left:14px;
  font-family:var(--phx-font-title);font-weight:900;font-size:19px;
  letter-spacing:-.02em;line-height:1.25;color:var(--phx-bone);
}
.phx-brand__mark::before{
  content:"";position:absolute;left:1px;top:.44em;
  width:7px;height:7px;background:var(--phx-flame);transform:rotate(45deg);
}
.phx-brand__tag{
  font-family:var(--phx-font-mono);font-size:10.5px;letter-spacing:.1em;
  color:var(--phx-gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.phx-burger{
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  padding:8px 10px;border:1px solid rgba(231,227,218,.28);color:var(--phx-mist);
  transition:border-color .18s var(--phx-ease),color .18s var(--phx-ease);
}
.phx-burger:hover{border-color:var(--phx-brass);color:var(--phx-brass-lite)}
.phx-burger__text{font-family:var(--phx-font-mono);font-size:11px;letter-spacing:.12em}
.phx-burger__bars{position:relative;width:16px;height:10px;display:block}
.phx-burger__bars::before,.phx-burger__bars::after{
  content:"";position:absolute;left:0;width:16px;height:1px;background:currentColor;
  transition:transform .2s var(--phx-ease),top .2s var(--phx-ease);
}
.phx-burger__bars::before{top:0}
.phx-burger__bars::after{top:9px}
.phx-rail[data-open] .phx-burger__bars::before{top:5px;transform:rotate(12deg)}
.phx-rail[data-open] .phx-burger__bars::after{top:5px;transform:rotate(-12deg)}

/* drawer（移动端） */
.phx-panel{
  position:fixed;top:var(--phx-topbar-h);right:0;bottom:0;
  width:min(86vw,340px);
  display:flex;flex-direction:column;justify-content:space-between;gap:22px;
  padding:22px 18px 30px;
  background:var(--phx-night);
  border-left:1px solid rgba(200,155,60,.28);
  overflow-y:auto;
  transform:translateX(102%);visibility:hidden;
  transition:transform .28s var(--phx-ease),visibility .28s linear;
}
.phx-rail[data-open] .phx-panel{transform:none;visibility:visible}

.phx-nav__label{
  font-family:var(--phx-font-mono);font-size:11px;letter-spacing:.16em;
  color:var(--phx-brass);padding-bottom:8px;margin-bottom:10px;
  border-bottom:1px solid rgba(200,155,60,.3);
}
.phx-nav__list{display:flex;flex-direction:column;gap:2px}
.phx-nav__link{
  display:flex;align-items:baseline;gap:10px;
  padding:9px 10px 9px 12px;
  border-left:2px solid transparent;
  font-size:15px;color:var(--phx-mist);
  transition:border-color .18s var(--phx-ease),color .18s var(--phx-ease),background .18s var(--phx-ease);
}
.phx-nav__num{font-family:var(--phx-font-mono);font-size:11px;letter-spacing:.12em;color:var(--phx-gray)}
.phx-nav__link:hover{border-left-color:var(--phx-brass);color:#fff}
.phx-nav__link:hover .phx-nav__num{color:var(--phx-brass-lite)}
.phx-nav__link[aria-current="page"]{
  border-left-color:var(--phx-flame);color:#fff;background:rgba(255,90,31,.09);
}
.phx-nav__link[aria-current="page"] .phx-nav__num{color:var(--phx-flame)}

.phx-utility{
  display:flex;flex-direction:column;gap:10px;
  padding-top:18px;border-top:1px solid rgba(200,155,60,.22);
}
.phx-switch{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 12px;border:1px solid rgba(231,227,218,.26);color:var(--phx-mist);
  font-family:var(--phx-font-mono);font-size:11px;letter-spacing:.08em;text-align:left;
  transition:border-color .18s var(--phx-ease),color .18s var(--phx-ease);
}
.phx-switch:hover{border-color:var(--phx-brass);color:var(--phx-brass-lite)}
.phx-switch__dot{
  width:9px;height:9px;flex:0 0 auto;border-radius:50%;
  background:rgba(231,227,218,.28);
  transition:background .2s var(--phx-ease),box-shadow .2s var(--phx-ease);
}
.phx-switch[aria-pressed="true"] .phx-switch__dot{
  background:var(--phx-flame);box-shadow:0 0 10px rgba(255,90,31,.85);
}
.phx-utility__link{
  display:inline-flex;align-items:center;justify-content:space-between;
  padding:11px 13px;background:var(--phx-flame);color:#0B1220;
  font-family:var(--phx-font-title);font-weight:700;font-size:14px;
  transition:transform .18s var(--phx-ease);
}
.phx-utility__link::after{content:"→";font-family:var(--phx-font-mono);font-weight:400}
.phx-utility__link:hover{transform:translateY(-2px)}

.phx-rail__meter{
  position:absolute;left:0;right:0;bottom:0;height:2px;
  background:rgba(231,227,218,.14);overflow:hidden;
}
.phx-rail__meterbar{
  display:block;width:var(--phx-progress,0%);height:100%;
  background:linear-gradient(90deg,var(--phx-flame),var(--phx-brass));
  transition:width .12s linear,height .12s linear;
}

/* 桌面轨道 */
@media (min-width:1000px){
  .phx-rail{
    width:var(--phx-rail-w);height:100%;
    border-right:1px solid rgba(200,155,60,.24);border-bottom:0;
  }
  .phx-rail__head{
    height:auto;flex-direction:column;align-items:flex-start;gap:8px;
    padding:30px 24px 18px;border-bottom:1px solid rgba(200,155,60,.18);
  }
  .phx-brand__mark{font-size:21px}
  .phx-burger{display:none}
  .phx-panel{
    position:static;transform:none;visibility:visible;
    width:auto;border-left:0;overflow-y:auto;
    flex:1 1 auto;padding:22px 14px 26px 16px;
  }
  .phx-nav__link{font-size:14.5px}
  .phx-utility{padding-top:20px}
  .phx-rail__meter{left:auto;right:0;top:0;bottom:0;width:2px;height:auto}
  .phx-rail__meterbar{
    width:100%;height:var(--phx-progress,0%);
    background:linear-gradient(180deg,var(--phx-flame),var(--phx-brass));
  }
}
@media (max-width:420px){
  .phx-brand__tag{display:none}
}

/* ---------- 6. Footer ---------- */
.phx-foot{
  position:relative;
  background:var(--phx-red);
  color:var(--phx-bone);
}
.phx-foot__cut{
  height:44px;background:var(--phx-bg);
  clip-path:polygon(0 0,100% 0,100% 0,0 100%);
}
.phx-foot__inner{
  max-width:1180px;margin-inline:auto;
  padding:14px 20px 40px;
  display:grid;grid-template-columns:1fr;gap:30px;
}
.phx-foot__brand{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.phx-foot__name{
  font-family:var(--phx-font-title);font-weight:900;font-size:24px;
  letter-spacing:-.02em;line-height:1.2;
}
.phx-foot__badge{
  font-family:var(--phx-font-mono);font-size:11px;letter-spacing:.14em;
  padding:4px 9px;border:1px solid var(--phx-brass-lite);color:var(--phx-brass-lite);
}
.phx-foot__line{font-size:14.5px;color:rgba(245,241,234,.9)}
.phx-foot__heading{
  font-family:var(--phx-font-mono);font-size:11px;letter-spacing:.16em;
  color:var(--phx-brass-lite);padding-bottom:8px;margin-bottom:12px;
  border-bottom:1px solid rgba(245,241,234,.28);
}
.phx-foot__list{display:flex;flex-direction:column;gap:8px}
.phx-foot__list a{
  font-size:15px;color:var(--phx-bone);border-bottom:1px solid transparent;
  transition:border-color .18s var(--phx-ease),color .18s var(--phx-ease);
}
.phx-foot__list a:hover{color:var(--phx-brass-lite);border-bottom-color:var(--phx-brass-lite)}
.phx-foot__contact{display:flex;flex-direction:column;gap:12px}
.phx-foot__muted{font-size:13px;line-height:1.8;color:rgba(245,241,234,.76)}
.phx-foot__mono{font-family:var(--phx-font-mono);font-size:12.5px;letter-spacing:.04em;color:var(--phx-bone)}
.phx-foot__legal{
  max-width:1180px;margin-inline:auto;
  padding:18px 20px 30px;
  border-top:1px solid rgba(245,241,234,.24);
  display:flex;flex-wrap:wrap;gap:8px 26px;align-items:baseline;
}
.phx-foot__record{
  font-family:var(--phx-font-mono);font-size:12px;letter-spacing:.08em;color:var(--phx-bone);
}
@media (min-width:760px){
  .phx-foot__cut{height:72px}
  .phx-foot__inner{
    grid-template-columns:1.35fr .8fr .8fr 1.1fr;gap:34px;padding:20px 40px 46px;
  }
  .phx-foot__legal{padding:18px 40px 32px}
}
@media (min-width:1000px){
  .phx-foot__cut{height:88px}
}

/* ---------- 7. Layout ---------- */
.phx-main{display:block;min-height:60vh}
.phx-container{width:100%;max-width:1180px;margin-inline:auto;padding-inline:20px}
@media (min-width:1000px){.phx-container{padding-inline:40px}}
.phx-section{padding-block:clamp(48px,7vw,96px)}
.phx-section--tight{padding-block:clamp(32px,4vw,56px)}
.phx-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.phx-grid>*{grid-column:1/-1}
@media (min-width:760px){
  .phx-grid>*{grid-column:auto}
  .phx-span-3{grid-column:span 3}
  .phx-span-4{grid-column:span 4}
  .phx-span-5{grid-column:span 5}
  .phx-span-6{grid-column:span 6}
  .phx-span-7{grid-column:span 7}
  .phx-span-8{grid-column:span 8}
  .phx-span-12{grid-column:span 12}
  .phx-offset-1{grid-column-start:2}
}

/* ---------- 8. Typography ---------- */
.phx-h1{
  font-family:var(--phx-font-title);font-weight:900;
  font-size:clamp(34px,5.6vw,56px);line-height:1.08;letter-spacing:-.02em;
}
.phx-h2{
  font-family:var(--phx-font-title);font-weight:900;
  font-size:clamp(26px,3.4vw,40px);line-height:1.14;letter-spacing:-.02em;
}
.phx-h3{
  font-family:var(--phx-font-title);font-weight:900;
  font-size:clamp(20px,2.2vw,28px);line-height:1.24;letter-spacing:-.015em;
}
.phx-h4{font-family:var(--phx-font-title);font-weight:700;font-size:20px;line-height:1.35}
.phx-lede{
  font-size:clamp(17px,1.5vw,20px);line-height:1.8;
  color:var(--phx-fg);max-width:72ch;
}
.phx-body{max-width:74ch}
.phx-body p+p{margin-top:1.1em}
.phx-body ul,.phx-body ol{list-style:disc;padding-left:1.3em;margin-block:1em}
.phx-body li+li{margin-top:.35em}
.phx-eyebrow{
  display:inline-block;
  font-family:var(--phx-font-mono);font-size:12px;letter-spacing:.16em;
  color:var(--phx-accent-ink);margin-bottom:12px;
}
.phx-mark{
  background-image:linear-gradient(transparent 58%,rgba(200,155,60,.55) 58%);
  padding:0 .1em;
}
.phx-note{
  border-left:2px solid var(--phx-brass);padding-left:14px;
  font-size:14.5px;color:var(--phx-muted);
}
.phx-tag{
  display:inline-block;
  font-family:var(--phx-font-mono);font-size:11px;letter-spacing:.1em;
  padding:3px 8px;background:var(--phx-turf);color:var(--phx-mist);
}

/* ---------- 9. Buttons ---------- */
.phx-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 20px;border:1px solid transparent;
  font-family:var(--phx-font-title);font-weight:700;font-size:15px;line-height:1.2;
  transition:transform .18s var(--phx-ease),border-color .18s var(--phx-ease),background .18s var(--phx-ease),color .18s var(--phx-ease);
}
.phx-btn:hover{transform:translateY(-2px)}
.phx-btn--flame{background:var(--phx-flame);color:#0B1220}
.phx-btn--bone{background:var(--phx-bone);color:var(--phx-ink)}
.phx-btn--ghost{border-color:var(--phx-line-strong);color:var(--phx-fg)}
.phx-btn--ghost:hover{border-color:var(--phx-brass);color:var(--phx-accent-ink)}

/* ---------- 10. Breadcrumbs ---------- */
.phx-crumbs{font-family:var(--phx-font-mono);font-size:12px;letter-spacing:.08em;color:var(--phx-muted)}
.phx-crumbs__list{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.phx-crumbs__item{display:inline-flex;align-items:center;gap:8px}
.phx-crumbs__link{color:inherit;border-bottom:1px solid transparent;transition:color .18s var(--phx-ease),border-color .18s var(--phx-ease)}
.phx-crumbs__link:hover{color:var(--phx-accent-ink);border-bottom-color:currentColor}
.phx-crumbs__sep{color:var(--phx-brass)}

/* ---------- 11. Chips ---------- */
.phx-chipbar{display:flex;flex-wrap:wrap;gap:8px}
.phx-chip{
  font-family:var(--phx-font-mono);font-size:12px;letter-spacing:.08em;
  padding:7px 12px;border:1px solid var(--phx-line-strong);color:var(--phx-fg);
  transition:border-color .18s var(--phx-ease),background .18s var(--phx-ease),color .18s var(--phx-ease);
}
.phx-chip:hover{border-color:var(--phx-brass)}
.phx-chip[aria-pressed="true"]{background:var(--phx-flame);border-color:var(--phx-flame);color:#0B1220}

/* ---------- 12. Table ---------- */
.phx-tablewrap{overflow-x:auto;border:1px solid var(--phx-line);box-shadow:var(--phx-shadow)}
.phx-table{min-width:640px;font-size:15px}
.phx-table caption{
  caption-side:top;text-align:left;padding:12px 14px;
  font-family:var(--phx-font-mono);font-size:11px;letter-spacing:.14em;color:var(--phx-muted);
}
.phx-table th{
  font-family:var(--phx-font-mono);font-size:11.5px;font-weight:400;letter-spacing:.12em;
  text-align:left;padding:12px 14px;color:var(--phx-fg);
  border-bottom:1px solid var(--phx-brass);white-space:nowrap;
}
.phx-table td{padding:12px 14px;border-bottom:1px solid var(--phx-line);vertical-align:top}
.phx-table tbody tr:nth-child(even){background:var(--phx-row-alt)}
.phx-table .is-col{background:rgba(200,155,60,.16)}
.phx-table tbody tr:last-child td{border-bottom:0}

/* ---------- 13. Media ---------- */
.phx-media{
  position:relative;overflow:hidden;
  border:1px solid var(--phx-line);
  background:linear-gradient(140deg,var(--phx-night) 0%,var(--phx-turf) 100%);
}
.phx-media img{width:100%;height:100%;object-fit:cover}
.phx-media--wide{aspect-ratio:16/7}
.phx-media--std{aspect-ratio:4/3}
.phx-media--tall{aspect-ratio:3/4}
.phx-media--slant{clip-path:polygon(0 0,100% 0,100% 88%,0 100%)}
.phx-media__cap{
  position:absolute;left:0;right:0;bottom:0;padding:10px 12px;
  font-family:var(--phx-font-mono);font-size:11px;letter-spacing:.1em;color:var(--phx-mist);
  background:linear-gradient(transparent,rgba(5,8,16,.85));
}

/* ---------- 14. Data anchor ---------- */
.phx-stat{display:flex;flex-direction:column;gap:6px}
.phx-stat__num{
  font-family:var(--phx-font-mono);font-weight:700;
  font-size:clamp(44px,8vw,92px);line-height:.9;letter-spacing:-.02em;
  color:var(--phx-flame);
}
.phx-stat__label{
  font-family:var(--phx-font-mono);font-size:12px;letter-spacing:.12em;color:var(--phx-muted);
}

/* ---------- 15. TOC ---------- */
.phx-toc{border-left:1px solid var(--phx-line);padding-left:16px}
.phx-toc__list{display:flex;flex-direction:column;gap:2px}
.phx-toc__link{
  display:block;margin-left:-18px;padding:6px 0 6px 10px;
  border-left:2px solid transparent;
  font-family:var(--phx-font-mono);font-size:12px;letter-spacing:.08em;color:var(--phx-muted);
  transition:color .18s var(--phx-ease),border-color .18s var(--phx-ease);
}
.phx-toc__link:hover{color:var(--phx-fg);border-left-color:var(--phx-brass)}
.phx-toc__link[aria-current]{color:var(--phx-accent-ink);border-left-color:var(--phx-flame)}

/* ---------- 16. Slash divider ---------- */
.phx-slash{
  height:1px;border:0;
  background:linear-gradient(90deg,var(--phx-brass),rgba(200,155,60,0));
  transform:rotate(-3deg);transform-origin:left center;
}

/* ---------- 17. Reveal ---------- */
html.phx-reveal-ready [data-reveal]{
  opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--phx-ease),transform .5s var(--phx-ease);
}
html.phx-reveal-ready [data-reveal].is-visible{opacity:1;transform:none}
html.phx-reveal-ready .phx-slash{
  opacity:1;transform:rotate(-3deg) scaleX(0);
  transition:transform .48s var(--phx-ease);
}
html.phx-reveal-ready .phx-slash.is-visible{transform:rotate(-3deg) scaleX(1)}
@keyframes phx-flip{
  from{opacity:0;transform:translateY(18px) rotateX(42deg)}
  to{opacity:1;transform:none}
}
html.phx-reveal-ready .is-visible .phx-stat__num{
  animation:phx-flip .62s cubic-bezier(.2,.75,.25,1) both;
}

/* ---------- 18. Back to top ---------- */
.phx-top{
  position:fixed;right:20px;bottom:20px;z-index:70;
  width:46px;height:46px;display:grid;place-items:center;
  background:var(--phx-night);color:var(--phx-mist);
  border:1px solid rgba(200,155,60,.42);
  font-family:var(--phx-font-mono);font-size:15px;line-height:1;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s var(--phx-ease),transform .2s var(--phx-ease),visibility .2s linear,border-color .18s var(--phx-ease),color .18s var(--phx-ease);
}
.phx-top[data-visible="true"]{opacity:1;visibility:visible;transform:none}
.phx-top:hover{border-color:var(--phx-flame);color:var(--phx-flame)}

/* ---------- 19. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  html.phx-reveal-ready [data-reveal]{opacity:1;transform:none}
  html.phx-reveal-ready .phx-slash{opacity:1;transform:rotate(-3deg) scaleX(1)}
}