/* ===== 超凡娱乐主站 · 共享样式 /assets/site.css ===== */

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

/* ---------- 变量 ---------- */
:root{
  --bg:#05070F;
  --panel:#0C1424;
  --line:#1E2B45;
  --cyan:#3AF0DC;
  --violet:#8B5CFF;
  --gold:#FFB347;
  --text:#E9EFF9;
  --muted:#A3B4CB;
  --pink:#FF6C93;
  --green:#4FE0A0;
  --shell:1180px;
  --gutter:clamp(16px,4vw,40px);
  --radius:18px;
  --ease:cubic-bezier(.22,.7,.28,1);
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono","Noto Sans Mono CJK SC",monospace;
}

/* ---------- 基础排版与深空底色 ---------- */
body{
  min-height:100vh;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.75;
  color:var(--text);
  background-color:var(--bg);
  background-image:
    radial-gradient(760px 460px at 8% -8%,rgba(58,240,220,.13),transparent 64%),
    radial-gradient(680px 430px at 96% 2%,rgba(139,92,255,.17),transparent 62%),
    radial-gradient(1000px 620px at 50% 108%,rgba(58,240,220,.06),transparent 66%);
  background-attachment:fixed;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:-20% -10% -10%;
  z-index:-1;
  pointer-events:none;
  opacity:.5;
  background-image:
    radial-gradient(1.5px 1.5px at 30% 20%,rgba(233,239,249,.5),transparent),
    radial-gradient(1.5px 1.5px at 70% 60%,rgba(58,240,220,.45),transparent),
    radial-gradient(2px 2px at 45% 85%,rgba(139,92,255,.4),transparent),
    radial-gradient(1.2px 1.2px at 88% 32%,rgba(233,239,249,.35),transparent);
  background-size:340px 340px,460px 460px,520px 520px,280px 280px;
  animation:starDrift 70s linear infinite;
}
@keyframes starDrift{
  from{background-position:0 0,0 0,0 0,0 0}
  to{background-position:0 -680px,0 -920px,0 -1040px,0 -560px}
}
::selection{background:rgba(58,240,220,.28);color:var(--text)}

/* ---------- 容器与网格 ---------- */
.shell{width:min(100% - (var(--gutter) * 2),var(--shell));margin-inline:auto}
.grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.col-main{grid-column:1 / span 7}
.col-aside{grid-column:9 / span 4}
.col-full{grid-column:1 / -1}
@media (max-width:960px){
  .col-main,.col-aside{grid-column:1 / -1}
}

/* ---------- 跳转链接 ---------- */
.skip-link{
  position:absolute;
  left:var(--gutter);
  top:-70px;
  z-index:120;
  padding:11px 18px;
  border-radius:0 0 14px 14px;
  background:var(--cyan);
  color:#04121A;
  font-size:14px;
  font-weight:700;
  letter-spacing:.04em;
  transition:top .2s var(--ease);
}
.skip-link:focus{top:0}

/* ---------- 页头 ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(5,7,15,.88);
  border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
}
.site-header::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(58,240,220,.55),rgba(139,92,255,.45),transparent);
  animation:breathe 9s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.5}50%{opacity:.95}}
.scroll-progress{
  position:absolute;
  left:0;right:0;bottom:-1px;
  z-index:2;
  height:2px;
  transform:scaleX(0);
  transform-origin:0 50%;
  background:linear-gradient(90deg,var(--cyan),var(--violet));
}
.masthead{padding:16px 0 0}
.masthead__utility{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  min-height:36px;
}
.masthead__index{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.12em;
  color:var(--muted);
  text-align:center;
  white-space:nowrap;
}
.masthead__utility .btn{justify-self:end}
.masthead__brandline{padding:12px 0 14px;text-align:center}
.brand{display:inline-flex;flex-direction:column;align-items:center;gap:6px}
.brand__name{
  display:block;
  font-size:clamp(1.5rem,3.6vw,2.15rem);
  font-weight:900;
  letter-spacing:.22em;
  text-indent:.22em;
  line-height:1.15;
  color:var(--text);
}
.brand__name--thin{font-weight:200}
.brand__sub{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.26em;
  text-indent:.26em;
  color:rgba(58,240,220,.78);
}
.header__meta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.04em;
  color:var(--muted);
}
.dot{
  flex:0 0 auto;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 10px rgba(58,240,220,.9);
}

/* ---------- 导航 ---------- */
.nav-toggle{
  display:inline-flex;
  align-items:center;
  gap:9px;
  justify-self:start;
  padding:7px 13px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(12,20,36,.6);
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.1em;
  color:var(--muted);
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.nav-toggle:hover{border-color:var(--cyan);color:var(--cyan)}
.nav-toggle__bars{
  position:relative;
  display:block;
  width:15px;height:2px;
  border-radius:2px;
  background:currentColor;
  transition:background-color .2s var(--ease);
}
.nav-toggle__bars::before,
.nav-toggle__bars::after{
  content:"";
  position:absolute;left:0;
  width:15px;height:2px;
  border-radius:2px;
  background:currentColor;
  transition:transform .24s var(--ease),top .24s var(--ease);
}
.nav-toggle__bars::before{top:-5px}
.nav-toggle__bars::after{top:5px}
.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)}

.site-nav{
  max-height:0;
  opacity:0;
  visibility:hidden;
  overflow:hidden;
  padding:0 0 12px;
  transition:max-height .32s var(--ease),opacity .22s var(--ease),visibility .22s var(--ease);
}
.site-nav[data-open]{max-height:560px;opacity:1;visibility:visible}
.site-nav__list{display:flex;flex-direction:column;gap:0;padding-top:4px}
.site-nav__link{
  position:relative;
  display:block;
  padding:13px 2px;
  border-bottom:1px solid var(--line);
  font-size:15.5px;
  color:var(--muted);
  transition:color .2s var(--ease),padding-left .2s var(--ease);
}
.site-nav__link::after{
  content:"";
  position:absolute;left:2px;bottom:-1px;
  width:34px;height:2px;
  background:linear-gradient(90deg,var(--cyan),var(--violet));
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform .24s var(--ease);
}
.site-nav__link:hover{color:var(--text)}
.site-nav__link[aria-current="page"]{color:var(--cyan)}
.site-nav__link[aria-current="page"]::after{transform:scaleX(1)}

@media (min-width:861px){
  .nav-toggle{display:none}
  .site-nav{
    max-height:none;opacity:1;visibility:visible;overflow:visible;
    padding:8px 0 18px;
  }
  .site-nav__list{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:2px;padding-top:0}
  .site-nav__link{padding:9px 16px 12px;border-bottom:0;font-size:15px;letter-spacing:.05em}
  .site-nav__link::after{left:16px;right:16px;width:auto;bottom:5px}
}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 20px;
  border:1px solid transparent;
  border-radius:999px;
  font-size:14px;
  letter-spacing:.06em;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.btn--gold{
  background:linear-gradient(120deg,#FFC468,#FF9E28);
  color:#1B1004;
  font-weight:700;
}
.btn--gold:hover{transform:translateY(-1px);box-shadow:0 10px 28px -12px rgba(255,179,71,.85)}
.btn--ghost{
  border-color:var(--line);
  background:rgba(12,20,36,.7);
  color:var(--text);
}
.btn--ghost:hover{border-color:var(--cyan);color:var(--cyan)}
.btn--sm{padding:8px 15px;font-size:12.5px}
.btn:active{transform:translateY(0)}

/* ---------- 返回顶部 ---------- */
.to-top{
  position:fixed;
  right:clamp(14px,2.6vw,28px);
  bottom:clamp(14px,2.6vw,28px);
  z-index:70;
  display:grid;
  place-items:center;
  width:46px;height:46px;
  border-radius:50%;
  border:1px solid rgba(58,240,220,.35);
  background:rgba(12,20,36,.92);
  color:var(--cyan);
  font-family:var(--mono);
  font-size:16px;
  line-height:1;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .24s var(--ease),transform .24s var(--ease),visibility .24s,box-shadow .24s var(--ease),background-color .2s var(--ease);
}
.to-top[data-visible]{opacity:1;visibility:visible;transform:none;box-shadow:0 12px 32px -16px rgba(58,240,220,.9)}
.to-top:hover{background:rgba(58,240,220,.14)}

/* ---------- 页脚 ---------- */
.site-footer{
  position:relative;
  z-index:1;
  margin-top:clamp(60px,10vw,120px);
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(12,20,36,.55),rgba(5,7,15,.96));
}
.site-footer::before{
  content:"";
  position:absolute;left:0;right:0;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(139,92,255,.6),rgba(58,240,220,.6),transparent);
}
.footer-shell{padding:clamp(36px,6vw,64px) 0 30px}
.footer-band{padding:26px 0;border-bottom:1px solid var(--line)}
.footer-band:first-child{padding-top:0}
.footer-band:last-child{border-bottom:0;padding-bottom:0}
.footer-band--identity{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.footer-brand{font-size:1.2rem;font-weight:900;letter-spacing:.2em}
.footer-tagline{margin-top:8px;color:var(--muted);font-size:15px}
.footer-version{margin-top:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--muted)}
.footer-band__label{margin-bottom:14px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:rgba(58,240,220,.8)}
.footer-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:6px 24px}
.footer-links a{
  display:inline-flex;
  align-items:baseline;
  gap:10px;
  padding:5px 0;
  font-size:14.5px;
  color:var(--muted);
  transition:color .2s var(--ease),transform .2s var(--ease);
}
.footer-links a:hover{color:var(--cyan);transform:translateX(2px)}
.footer-links__num{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:#43597A}
.contact-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px 28px}
.contact-item{display:flex;flex-direction:column;gap:5px}
.contact-item__label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted)}
.contact-item__value{font-size:14.5px;color:var(--text);word-break:break-word}
.contact-item__value--mono{font-family:var(--mono);letter-spacing:.06em}
.contact-item--note .contact-item__value{font-size:13.5px;line-height:1.7;color:var(--muted)}
.footer-band--legal{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;padding-top:22px}
.footer-legal{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--muted)}
.footer-legal--muted{color:#5D7191}

/* ---------- 页面标题区与面包屑 ---------- */
.page-head{padding:clamp(44px,8vw,92px) 0 clamp(18px,3vw,30px)}
.page-head__kicker{font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--cyan)}
.page-title{
  margin-top:12px;
  font-size:clamp(2.1rem,6vw,4rem);
  font-weight:200;
  line-height:1.06;
  letter-spacing:-.01em;
}
.page-title strong,.page-title b{font-weight:900}
.page-lead{margin-top:16px;max-width:34em;font-size:1rem;color:var(--muted)}
.breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  padding-top:clamp(16px,3vw,26px);
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--muted);
}
.breadcrumbs a{color:var(--muted);transition:color .2s var(--ease)}
.breadcrumbs a:hover{color:var(--cyan)}
.breadcrumbs__sep{color:#3A4A66}
.breadcrumbs [aria-current="page"]{color:var(--text)}

/* ---------- 正文 ---------- */
.prose{max-width:34em}
.prose p{color:var(--text)}
.prose p + p{margin-top:.9em}
.prose a{color:var(--cyan);border-bottom:1px solid rgba(58,240,220,.35)}
.prose strong{font-weight:700}
.prose h2{
  margin:1.7em 0 .6em;
  font-size:clamp(1.35rem,2.6vw,1.85rem);
  font-weight:200;
  line-height:1.25;
}
.prose h2 strong{font-weight:900}
.prose h3{margin:1.4em 0 .4em;font-size:1.05rem;font-weight:700}
.prose ul,.prose ol{display:grid;gap:8px;margin:1em 0}
.prose ul li{position:relative;padding-left:1.1em}
.prose ul li::before{
  content:"";
  position:absolute;left:0;top:.72em;
  width:6px;height:6px;
  border-radius:2px;
  background:var(--cyan);
  opacity:.85;
}
.prose ol{counter-reset:prose;list-style:none}
.prose ol li{position:relative;padding-left:1.8em}
.prose ol li::before{
  counter-increment:prose;
  content:counter(prose,decimal-leading-zero);
  position:absolute;left:0;top:0;
  font-family:var(--mono);font-size:12px;color:var(--cyan);
}
.prose hr{margin:2em 0;border:0;height:1px;background:var(--line)}

/* ---------- 章节锚 ---------- */
.chapter{padding-top:clamp(40px,7vw,76px)}
.chapter__mark{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.chapter__index{font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--cyan)}
.chapter__band{
  flex:1 1 auto;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(58,240,220,.75),rgba(139,92,255,.4) 45%,transparent);
}
.chapter__note{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted)}
.chapter__title{font-size:clamp(1.5rem,3.4vw,2.3rem);font-weight:200;line-height:1.15}
.chapter__title strong{font-weight:900}

/* ---------- 卡片与标签 ---------- */
.card-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{
  padding:clamp(18px,2.4vw,26px);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(160deg,rgba(20,31,54,.82),rgba(12,20,36,.6));
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.card--cyan{border-color:rgba(58,240,220,.35)}
.card--gold{
  border-color:rgba(255,179,71,.4);
  background:linear-gradient(160deg,rgba(48,32,12,.6),rgba(12,20,36,.66));
}
.card--violet{border-color:rgba(139,92,255,.38)}
.card__label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--muted)}
.card__title{margin-top:8px;font-size:1.1rem;font-weight:700;line-height:1.35}
.card__body{margin-top:8px;font-size:.95rem;line-height:1.7;color:var(--muted)}
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(12,20,36,.6);
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--muted);
}
.tag--cyan{color:var(--cyan);border-color:rgba(58,240,220,.4);background:rgba(58,240,220,.08)}
.tag--gold{color:var(--gold);border-color:rgba(255,179,71,.45);background:rgba(255,179,71,.1)}
.tag--violet{color:#C4AEFF;border-color:rgba(139,92,255,.45);background:rgba(139,92,255,.12)}
.tag--pink{color:var(--pink);border-color:rgba(255,108,147,.4);background:rgba(255,108,147,.1)}
.tag--green{color:var(--green);border-color:rgba(79,224,160,.4);background:rgba(79,224,160,.1)}
.data-num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.06em}
[data-flip]{display:inline-block;transition:transform .18s var(--ease),color .18s var(--ease)}
[data-flip].is-flipping{transform:translateY(-3px) rotateX(28deg);color:var(--gold)}

/* ---------- 横向滑动卡片带 ---------- */
.rail{
  display:flex;
  gap:16px;
  margin-inline:-4px;
  padding:4px 4px 16px;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;
}
.rail > *{flex:0 0 clamp(240px,60vw,320px);scroll-snap-align:start}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}

/* ---------- 手风琴 ---------- */
.fold{border-top:1px solid var(--line)}
.fold:last-of-type{border-bottom:1px solid var(--line)}
.fold__trigger{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  width:100%;
  padding:18px 2px;
  text-align:left;
  font-size:1rem;
  font-weight:700;
  color:var(--text);
  transition:color .2s var(--ease);
}
.fold__trigger:hover{color:var(--cyan)}
.fold__trigger::after{
  content:"+";
  font-family:var(--mono);
  font-size:18px;
  line-height:1;
  color:var(--cyan);
  transition:transform .24s var(--ease);
}
.fold.is-open .fold__trigger::after{transform:rotate(45deg)}
.fold__panel{max-height:0;overflow:hidden;transition:max-height .32s var(--ease)}
.fold.is-open .fold__panel{max-height:640px}
.fold__inner{max-width:34em;padding:0 2px 20px;font-size:.95rem;line-height:1.75;color:var(--muted)}

/* ---------- 章节目录 ---------- */
.toc{
  position:sticky;
  top:132px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(12,20,36,.55);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.toc__title{margin-bottom:10px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--muted)}
.toc__link{
  display:block;
  padding:7px 0 7px 12px;
  border-left:2px solid var(--line);
  font-size:13.5px;
  color:var(--muted);
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.toc__link:hover{color:var(--text)}
.toc__link.is-active{color:var(--cyan);border-left-color:var(--cyan)}

/* ---------- 媒体容器 ---------- */
.media-figure{margin:0}
.media-frame{
  position:relative;
  overflow:hidden;
  aspect-ratio:16 / 9;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(140deg,rgba(58,240,220,.1),rgba(139,92,255,.16) 45%,rgba(5,7,15,.92));
}
.media-frame > img,
.media-frame > picture,
.media-frame > picture > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.media-frame > img,
.media-frame > picture > img{object-fit:cover}
.media-frame--wide{aspect-ratio:21 / 9}
.media-frame--tall{aspect-ratio:4 / 5}
.media-frame__caption{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:14px 16px;
  background:linear-gradient(0deg,rgba(5,7,15,.88),transparent);
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--text);
}

/* ---------- 装饰件 ---------- */
.divider-band{
  max-width:96px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--cyan),rgba(139,92,255,.5) 55%,transparent);
}
.hairline{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent)}

/* ---------- 滚动显现 ---------- */
.js-reveal [data-reveal]{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .24s var(--ease),transform .24s var(--ease);
}
.js-reveal [data-reveal].is-visible{opacity:1;transform:none}

/* ---------- 响应式 ---------- */
@media (max-width:860px){
  body{background-attachment:scroll;font-size:16px}
  .toc{position:static;top:auto}
  .to-top{width:42px;height:42px}
}
@media (max-width:620px){
  .masthead__index{display:none}
  .masthead__utility{grid-template-columns:auto 1fr}
  .footer-band--identity{flex-direction:column;align-items:flex-start}
  .footer-links{grid-template-columns:1fr 1fr}
  .contact-list{grid-template-columns:1fr}
  .footer-band{padding:22px 0}
}

/* ---------- 动效降级 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  body::before{animation:none}
  .site-header::after{animation:none;opacity:.6}
  .js-reveal [data-reveal]{opacity:1;transform:none}
  [data-flip].is-flipping{transform:none}
}