/* =========================================================
   大咖娱乐会馆 · 共享样式 /assets/site.css
   深墨蓝夜空 + 霓虹紫 + 暖橙 · 侧边轨道导航 · 纵向叙事长卷
   ========================================================= */

/* ---------- 1. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{min-height:100vh;}
img,svg,video,picture{max-width:100%;display:block;}
img{height:auto;}
button,input,select,textarea{font:inherit;color:inherit;}
ul,ol{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,h5,p,figure,blockquote{margin:0;}
a{color:inherit;}
table{border-collapse:collapse;width:100%;}

/* ---------- 2. 设计令牌 ---------- */
:root{
  --ink-navy-deep:#0B1026;
  --ink-navy-soft:#141B3C;
  --neon-violet:#7A4DFF;
  --violet-glow:#A98BFF;
  --warm-orange:#FF7A3D;
  --amber:#FFC46B;
  --mist:#F4F6FF;
  --steel:#8C95B8;
  --mint:#4FD1A5;
  --rose:#FF6B8A;

  --line:rgba(140,149,184,.22);
  --line-soft:rgba(140,149,184,.12);
  --line-strong:rgba(169,139,255,.45);

  --rail:236px;
  --header-h:64px;
  --wrap:1160px;

  --radius-s:10px;
  --radius-m:18px;
  --radius-l:28px;

  --shadow-soft:0 22px 48px -28px rgba(0,0,0,.85);
  --ease:cubic-bezier(.22,.61,.36,1);

  --font-sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
}

/* ---------- 3. 中文排版基底 ---------- */
body{
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.75;
  letter-spacing:.01em;
  color:var(--mist);
  background-color:var(--ink-navy-deep);
  background-image:
    radial-gradient(58vw 48vh at 12% -6%, rgba(122,77,255,.30), transparent 70%),
    radial-gradient(48vw 44vh at 94% 6%, rgba(255,122,61,.17), transparent 72%),
    radial-gradient(70vw 62vh at 72% 104%, rgba(122,77,255,.16), transparent 76%);
  background-repeat:no-repeat;
  background-attachment:fixed;
}
h1,h2,h3,h4{font-weight:800;line-height:1.18;letter-spacing:-.01em;}
strong{font-weight:700;color:var(--mist);}
::selection{background:rgba(122,77,255,.5);color:var(--mist);}

:focus-visible{outline:2px solid var(--violet-glow);outline-offset:3px;border-radius:4px;}

/* ---------- 4. 跳转链接 ---------- */
.skip-link{
  position:fixed;top:10px;left:10px;z-index:120;
  padding:10px 16px;border-radius:999px;
  background:var(--warm-orange);color:#170A02;
  font-size:14px;font-weight:700;text-decoration:none;
  transform:translateY(-160%);
  transition:transform .3s var(--ease);
}
.skip-link:focus{transform:translateY(0);}

/* ---------- 5. 品牌署名 ---------- */
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;flex:0 0 auto;}
.brand-mark{
  position:relative;flex:0 0 auto;width:36px;height:36px;border-radius:11px;
  background:linear-gradient(150deg,rgba(122,77,255,.5),rgba(255,122,61,.28));
  border:1px solid var(--line-strong);
  box-shadow:0 12px 26px -16px rgba(122,77,255,.95);
}
.brand-mark::before{
  content:"";position:absolute;inset:9px;border-radius:4px;
  border:1px solid rgba(169,139,255,.85);
}
.brand-mark::after{
  content:"";position:absolute;right:6px;bottom:6px;width:5px;height:5px;border-radius:50%;
  background:var(--warm-orange);box-shadow:0 0 10px 2px rgba(255,122,61,.7);
}
.brand-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
.brand-name{font-size:16.5px;font-weight:800;letter-spacing:.05em;color:var(--mist);}
.brand-sub{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;color:var(--steel);}

/* ---------- 6. 头部外壳（移动端：顶部粘性条） ---------- */
.site-header{
  position:sticky;top:0;z-index:70;
  background:linear-gradient(180deg,rgba(11,16,38,.96),rgba(11,16,38,.86));
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.header-inner{
  max-width:var(--wrap);margin:0 auto;
  padding:0 clamp(16px,4vw,28px);
  min-height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}

/* ---------- 7. 移动抽屉按钮 ---------- */
.nav-toggle{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 15px;border-radius:999px;
  border:1px solid var(--line);background:rgba(20,27,60,.62);
  color:var(--mist);font-size:13px;letter-spacing:.1em;cursor:pointer;
  transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease);
}
.nav-toggle:hover{border-color:var(--line-strong);background:rgba(122,77,255,.18);}
.nav-toggle__bars{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;width:16px;height:14px;}
.nav-toggle__bars span{display:block;height:1.5px;border-radius:2px;background:var(--violet-glow);transition:transform .3s var(--ease),opacity .3s var(--ease);}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}
.nav-toggle__label{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;color:rgba(244,246,255,.8);}

/* ---------- 8. 导航（移动端：右侧抽屉） ---------- */
.site-nav{
  position:fixed;top:var(--header-h);right:0;z-index:65;
  width:min(88vw,340px);
  height:calc(100vh - var(--header-h));
  padding:22px 18px 36px;
  display:flex;flex-direction:column;gap:20px;
  overflow-y:auto;
  background:linear-gradient(200deg,rgba(20,27,60,.99),rgba(11,16,38,.99));
  border-left:1px solid var(--line);
  box-shadow:-28px 0 64px -34px rgba(0,0,0,.95);
  transform:translateX(106%);
  visibility:hidden;
  transition:transform .4s var(--ease),visibility .4s linear;
}
.site-nav[data-open]{transform:translateX(0);visibility:visible;}
body.is-nav-open{overflow:hidden;}

.nav-rail__caption{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.24em;
  color:var(--steel);padding-left:18px;
}
.nav-list{display:flex;flex-direction:column;gap:2px;}
.nav-item{display:block;}
.nav-link{
  position:relative;display:flex;align-items:baseline;gap:12px;
  padding:11px 14px 11px 18px;
  border:1px solid transparent;border-left:0;
  border-radius:0 var(--radius-s) var(--radius-s) 0;
  color:rgba(244,246,255,.7);text-decoration:none;font-size:15px;letter-spacing:.02em;
  transition:color .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.nav-link::before{
  content:"";position:absolute;left:0;top:50%;width:2px;height:0;border-radius:2px;
  background:linear-gradient(180deg,var(--violet-glow),var(--warm-orange));
  transform:translateY(-50%);
  transition:height .35s var(--ease);
}
.nav-link:hover{color:var(--mist);background:rgba(122,77,255,.12);transform:translateX(3px);}
.nav-link:hover::before{height:50%;}
.nav-link[aria-current="page"],
.nav-link.is-active{
  color:var(--mist);
  background:linear-gradient(90deg,rgba(122,77,255,.28),rgba(122,77,255,0));
  border-color:rgba(169,139,255,.3);
}
.nav-link[aria-current="page"]::before,
.nav-link.is-active::before{height:64%;}
.nav-index{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
  color:var(--steel);transition:color .3s var(--ease);
}
.nav-link[aria-current="page"] .nav-index,
.nav-link.is-active .nav-index{color:var(--amber);}
.nav-label{display:inline-block;}

.nav-rail__foot{margin-top:auto;display:flex;flex-direction:column;gap:16px;padding:0 4px;}
.rail-meter__track{height:3px;border-radius:3px;background:rgba(140,149,184,.2);overflow:hidden;}
.rail-meter__fill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--neon-violet),var(--warm-orange));transition:width .2s linear;}
.rail-meter__meta{
  display:flex;justify-content:space-between;margin-top:8px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--steel);
}

/* ---------- 9. 阅读进度条 ---------- */
.read-progress{
  position:fixed;top:var(--header-h);left:0;right:0;height:2px;z-index:80;
  background:rgba(140,149,184,.14);pointer-events:none;
}
.read-progress__bar{
  display:block;height:100%;width:100%;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--neon-violet),var(--warm-orange));
  transition:transform .12s linear;
}

/* ---------- 10. 页脚 ---------- */
.site-footer{
  margin-top:clamp(48px,7vw,110px);
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(20,27,60,.72),rgba(11,16,38,.98));
}
.footer-inner{
  max-width:var(--wrap);margin:0 auto;
  padding:clamp(38px,6vw,72px) clamp(18px,4vw,40px) clamp(26px,4vw,44px);
  display:grid;gap:clamp(30px,4.5vw,60px);grid-template-columns:1fr;
}
.footer-brand{display:flex;flex-direction:column;gap:18px;max-width:360px;}
.footer-tagline{font-size:14.5px;line-height:1.8;color:rgba(244,246,255,.7);}
.footer-facts{display:flex;flex-direction:column;gap:10px;}
.footer-fact{display:flex;gap:12px;font-size:13px;line-height:1.7;}
.footer-fact__key{
  flex:0 0 auto;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
  color:var(--violet-glow);padding-top:3px;
}
.footer-fact__val{color:rgba(244,246,255,.78);}

.footer-nav{display:grid;gap:clamp(20px,3vw,34px);grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}
.footer-col{display:flex;flex-direction:column;gap:14px;}
.footer-col__title{
  font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:.22em;color:var(--violet-glow);
}
.footer-list{display:flex;flex-direction:column;gap:9px;}
.footer-link{
  position:relative;display:inline-block;padding-left:14px;
  font-size:14px;color:rgba(244,246,255,.68);text-decoration:none;
  transition:color .3s var(--ease),transform .3s var(--ease);
}
.footer-link::before{
  content:"";position:absolute;left:0;top:50%;width:6px;height:1px;
  background:var(--steel);transform:translateY(-50%);
  transition:background .3s var(--ease),width .3s var(--ease);
}
.footer-link:hover{color:var(--mist);transform:translateX(2px);}
.footer-link:hover::before{background:var(--warm-orange);width:9px;}
.footer-static{display:inline-block;padding-left:14px;font-size:13px;line-height:1.7;color:rgba(140,149,184,.9);}

.footer-legal{
  max-width:var(--wrap);margin:0 auto;
  padding:18px clamp(18px,4vw,40px) 34px;
  display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between;
  border-top:1px solid var(--line);
  font-size:13px;color:var(--steel);
}
.footer-legal__brand{color:rgba(244,246,255,.72);}

/* ---------- 11. 布局容器与章节 ---------- */
#main-content{display:block;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(18px,4vw,40px);}
.wrap--narrow{max-width:820px;}
.section{padding:clamp(52px,7vw,104px) 0;}
.section--tight{padding:clamp(30px,4vw,56px) 0;}
.section--band{
  background:linear-gradient(180deg,rgba(20,27,60,.78),rgba(20,27,60,.32));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.section-head{max-width:64ch;margin-bottom:clamp(24px,4vw,46px);}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:16px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--violet-glow);
}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;}
.section-title{font-size:clamp(28px,4.4vw,48px);line-height:1.1;}
.section-title em{
  font-style:normal;
  background:linear-gradient(100deg,var(--violet-glow),var(--warm-orange));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.lede{margin-top:16px;max-width:64ch;font-size:clamp(15px,1.6vw,17px);line-height:1.85;color:rgba(244,246,255,.76);}
.hairline{height:1px;border:0;margin:0;background:var(--line);}

/* ---------- 12. 网格 ---------- */
.grid{display:grid;gap:clamp(16px,2.4vw,28px);}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
.grid--split{grid-template-columns:1fr;}
@media (min-width:900px){
  .grid--split{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start;}
}

/* ---------- 13. 卡片 ---------- */
.card{
  position:relative;display:flex;flex-direction:column;gap:12px;
  padding:clamp(18px,2.4vw,26px);
  border-radius:var(--radius-m);border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(20,27,60,.94),rgba(11,16,38,.86));
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.card:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:var(--shadow-soft);}
.card__index{font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;color:var(--amber);}
.card__title{font-size:clamp(18px,2vw,21px);font-weight:700;line-height:1.35;}
.card__text{font-size:15px;line-height:1.8;color:rgba(244,246,255,.74);}
.card__meta{font-size:13px;color:var(--steel);}

/* ---------- 14. 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:999px;border:1px solid transparent;
  font-size:15px;font-weight:600;letter-spacing:.04em;text-decoration:none;cursor:pointer;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease);
}
.btn--primary{
  background:linear-gradient(120deg,var(--warm-orange),#FF9A5E);
  color:#180B02;
  box-shadow:0 14px 30px -18px rgba(255,122,61,.95);
}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 20px 38px -18px rgba(255,122,61,.95);}
.btn--ghost{border-color:var(--line);background:rgba(20,27,60,.5);color:var(--mist);}
.btn--ghost:hover{border-color:var(--line-strong);background:rgba(122,77,255,.18);transform:translateY(-2px);}
.btn--block{width:100%;}

/* ---------- 15. 标签与图例 ---------- */
.tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:999px;border:1px solid var(--line);
  background:rgba(20,27,60,.72);
  font-size:12px;letter-spacing:.06em;color:rgba(244,246,255,.78);
}
.tag--amber{border-color:rgba(255,196,107,.45);color:var(--amber);}
.tag--mint{border-color:rgba(79,209,165,.45);color:var(--mint);}
.tag--rose{border-color:rgba(255,107,138,.45);color:var(--rose);}
.tag-list{display:flex;flex-wrap:wrap;gap:8px;}

.legend{display:flex;flex-wrap:wrap;gap:12px 22px;}
.legend__item{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--steel);}
.legend__dot{width:8px;height:8px;border-radius:2px;background:var(--violet-glow);}
.legend__dot--orange{background:var(--warm-orange);}
.legend__dot--amber{background:var(--amber);}
.legend__dot--mint{background:var(--mint);}

/* ---------- 16. 图片容器（页面阶段放置图片） ---------- */
.media{
  position:relative;display:block;overflow:hidden;
  border-radius:var(--radius-m);border:1px solid var(--line);
  aspect-ratio:16/9;
  background:
    radial-gradient(70% 70% at 18% 8%,rgba(122,77,255,.38),transparent 70%),
    radial-gradient(60% 60% at 88% 92%,rgba(255,122,61,.22),transparent 72%),
    linear-gradient(150deg,rgba(20,27,60,.96),rgba(11,16,38,.96));
}
.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.media--wide{aspect-ratio:21/9;}
.media--tall{aspect-ratio:3/4;}
.media--square{aspect-ratio:1/1;}
.media__caption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:16px 18px;font-size:13px;line-height:1.6;
  color:rgba(244,246,255,.86);
  background:linear-gradient(0deg,rgba(11,16,38,.92),transparent);
}
.media__badge{
  position:absolute;top:14px;left:14px;z-index:2;
  padding:5px 11px;border-radius:999px;
  border:1px solid var(--line-strong);background:rgba(11,16,38,.72);
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;color:var(--violet-glow);
}

/* ---------- 17. 数字 · 规则 · 正文 ---------- */
.stat{display:flex;flex-direction:column;gap:6px;}
.stat__value{font-family:var(--font-mono);font-size:clamp(30px,5vw,52px);font-weight:700;line-height:1;color:var(--amber);}
.stat__label{font-size:13px;letter-spacing:.08em;color:var(--steel);}

.rules{
  display:grid;gap:0;border:1px solid var(--line);border-radius:var(--radius-m);
  overflow:hidden;background:rgba(20,27,60,.42);
}
.rules__item{display:flex;gap:14px;padding:16px 18px;border-bottom:1px solid var(--line-soft);}
.rules__item:last-child{border-bottom:0;}
.rules__item strong{color:var(--mist);}

.prose{max-width:70ch;font-size:16.5px;line-height:1.85;color:rgba(244,246,255,.82);}
.prose > * + *{margin-top:1.1em;}
.prose h2{font-size:clamp(22px,2.6vw,30px);margin-top:1.8em;color:var(--mist);}
.prose h3{font-size:clamp(18px,2vw,22px);margin-top:1.6em;color:var(--mist);}
.prose ul{display:grid;gap:8px;padding-left:1.1em;list-style:none;}
.prose li{position:relative;padding-left:14px;}
.prose li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:1px;background:var(--violet-glow);}
.prose a{color:var(--violet-glow);text-underline-offset:3px;}

/* ---------- 18. 面包屑 ---------- */
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--steel);}
.breadcrumb li{display:inline-flex;align-items:center;gap:8px;}
.breadcrumb li + li::before{content:"/";color:rgba(140,149,184,.5);}
.breadcrumb a{color:rgba(244,246,255,.72);text-decoration:none;transition:color .3s var(--ease);}
.breadcrumb a:hover{color:var(--mist);}
.breadcrumb [aria-current="page"]{color:var(--amber);}

/* ---------- 19. 标签式切换 ---------- */
.tabs{
  display:flex;flex-wrap:wrap;gap:6px;padding:6px;width:fit-content;max-width:100%;
  border:1px solid var(--line);border-radius:999px;background:rgba(20,27,60,.6);
  overflow-x:auto;
}
.tab{
  appearance:none;border:0;background:transparent;cursor:pointer;
  padding:8px 16px;border-radius:999px;
  font-size:14px;letter-spacing:.04em;color:rgba(244,246,255,.66);
  transition:color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
}
.tab:hover{color:var(--mist);}
.tab[aria-selected="true"],.tab.is-active{
  color:var(--mist);
  background:linear-gradient(120deg,rgba(122,77,255,.5),rgba(255,122,61,.28));
  box-shadow:inset 0 0 0 1px var(--line-strong);
}
.tab-panel{padding-top:clamp(18px,2.6vw,30px);}
.tab-panel[hidden]{display:none;}

/* ---------- 20. 横向滚动对比条 ---------- */
.scroll-x{
  display:flex;gap:16px;overflow-x:auto;padding:4px 4px 14px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
}
.scroll-x > *{flex:0 0 auto;scroll-snap-align:start;}

/* ---------- 21. 显现动效 ---------- */
[data-reveal]{
  opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
[data-reveal].is-visible{opacity:1;transform:none;}

/* ---------- 22. 桌面端：左侧轨道导航 ---------- */
@media (min-width:1024px){
  .site-header{
    position:fixed;inset:0 auto 0 0;
    width:var(--rail);
    border-bottom:0;border-right:1px solid var(--line);
    background:linear-gradient(180deg,rgba(20,27,60,.88),rgba(11,16,38,.98));
  }
  .header-inner{
    height:100%;max-width:none;
    padding:30px 20px 26px;
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:26px;
  }
  .nav-toggle{display:none;}
  .site-nav{
    position:static;transform:none;visibility:visible;
    width:auto;height:auto;padding:0;
    border:0;box-shadow:none;background:transparent;
    flex:1 1 auto;min-height:0;overflow-y:auto;gap:18px;
  }
  body.is-nav-open{overflow:auto;}
  .read-progress{top:0;left:var(--rail);}
  #main-content{margin-left:var(--rail);}
  .site-footer{margin-left:var(--rail);}
}

/* ---------- 23. 平板/页脚两栏 ---------- */
@media (min-width:768px){
  .footer-inner{grid-template-columns:minmax(230px,1fr) minmax(0,1.9fr);}
}

/* ---------- 24. 减弱动效 ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{opacity:1 !important;transform:none !important;}
  .card:hover,.btn:hover,.nav-link:hover,.footer-link:hover{transform:none !important;}
}