/* ==========================================================================
   战猫 WARCATS 官网首页
   --------------------------------------------------------------------------
   设计依据：work/design-review-20260918/preview-a-home.html（已确认稿）。
   约束（针对"模板感"）：
     * 不用背景模糊、径向光斑、跟随鼠标的高光；整份样式表只有一处阴影。
     * 圆角只有 4 档：4 / 10 / 16 / 999。
     * 间距只走一套 4 / 8 / 12 / 16 / 24 / 40 / 64，不写死零散值。
     * 字号只留 8 档，中文不用负字距。
     * 浅色为主。深色是预留的（.theme-dark 或 html[data-mode="dark"]），
       默认不启用，只在明确需要时才打开。
   ========================================================================== */
/* 颜色与尺度不再在这里定义，全部来自 tokens.css（全站唯一来源）。
   这里原来有一份完整的 :root（39 条定义）和一份 html[data-mode="dark"] 深色块，
   跟令牌文件重复。两份定义意味着改一个值要改两处，漏一处就不一致。
   下面只保留指向令牌的别名，让本文件原有的 91 条规则继续工作。 */

/* 首页自有的、暂时不进设计系统的取值。它们只服务这个页面，留着比塞进令牌更清楚。 */
:root{
  --logo-ring:color-mix(in srgb, var(--cyan) 22%, transparent);
}
/* 深色是预留档位，默认不触发；要启用时给 <html data-mode="dark"> 即可。 */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);
  font-size:var(--t-base);line-height:1.7;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button{font:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:var(--r-1)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s-half);top:var(--s-half);background:var(--btn-bg);color:var(--btn-fg);
  padding:var(--s-1) var(--s-2);border-radius:var(--r-1);z-index:50}
.wrap{width:min(var(--wrap),calc(100% - 48px));margin-inline:auto}

/* ---------------------------------------------------------------- 页头 */
.top{border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--paper);z-index:20}
.top-in{display:flex;align-items:center;gap:var(--s-3);min-height:72px}
.brand{display:flex;align-items:center;gap:var(--s-1);font-weight:700;font-size:var(--t-lg);letter-spacing:.01em}
.brand img{width:34px;height:34px;border-radius:var(--r-pill);flex:none}
.brand-name{display:flex;align-items:center;gap:var(--s-0)}
.brand small{font-size:var(--t-xs);font-weight:600;letter-spacing:.14em;color:var(--ink-3)}
.nav{display:flex;gap:var(--s-3);margin-left:auto;font-size:var(--t-md);color:var(--ink-2)}
.nav a{padding:var(--s-0) 0;white-space:nowrap}
.nav a:hover{color:var(--blue)}
.nav .enter{color:var(--ink-3);font-size:var(--t-sm)}
.mobile{display:none}

/* ---------------------------------------------------------------- 首屏 */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:var(--s-5);
  align-items:center;padding:var(--s-5) 0 var(--s-4)}
.hero-main{max-width:34rem}
.eyebrow{display:flex;align-items:center;gap:var(--s-1);margin:0;
  font-size:var(--t-xs);letter-spacing:.16em;color:var(--ink-3)}
.eyebrow::before{content:"";width:20px;height:2px;background:var(--cyan);flex:none}
/* 中文不用负字距；换行交给浏览器平衡，不写死 <br>。 */
.hero h1{
  font-size:clamp(30px,3.6vw,44px);line-height:1.32;font-weight:700;letter-spacing:0;
  margin:var(--s-2) 0 var(--s-half);text-wrap:balance;
}
.hero h1 em{font-style:normal;color:var(--blue)}
.lead{color:var(--ink-2);font-size:var(--t-lead);line-height:1.8;margin:0 0 var(--s-3)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s-half);align-items:center}
/* 16:9 锁死：素材 1672x941 正好是这个比例，不裁切，也不会因加载完成顶动版面。 */
.poster{margin:0;border:1px solid var(--line);border-radius:var(--r-2);overflow:hidden;aspect-ratio:16/9}
.poster img{width:100%;height:100%;object-fit:cover}

/* ---------------------------------------------------------------- 按钮 */
.btn{
  display:inline-flex;align-items:center;gap:var(--s-1);justify-content:center;
  padding:var(--s-half) var(--s-3);border-radius:var(--r-2);border:1px solid var(--btn-bg);
  background:var(--btn-bg);color:var(--btn-fg);font-size:var(--t-base);font-weight:600;
  transition:background .15s,border-color .15s,color .15s,transform .15s;
}
.btn:hover{background:var(--btn-bg-hover);border-color:var(--btn-bg-hover);color:var(--btn-fg-hover)}
.btn:active{transform:translateY(1px)}
/* 次要按钮给自己底色，不用 transparent：透明要叠父级底色才能算对比度，容易算错。 */
.btn.ghost{background:var(--paper);color:var(--btn-ghost-fg);border-color:var(--btn-ghost-line)}
.btn.ghost:hover{background:var(--btn-ghost-bg-hover);border-color:var(--btn-ghost-line-hover);color:var(--btn-ghost-fg)}

/* ---------------------------------------------------------------- 公告条 */
/* 公告条：只有状态标签和正文两栏。原来右侧还有一个「服务器状态」链接，
   跟首屏那个按钮重复，同一个视野里出现两次，去掉了。 */
.notice{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-2);align-items:baseline;
  border:1px solid var(--line);border-radius:var(--r-2);padding:var(--s-2) var(--s-3);margin-top:var(--s-3)}
.notice b{font-size:var(--t-xs);letter-spacing:.1em;color:var(--ink-3);white-space:nowrap}
.notice p{margin:0;font-size:var(--t-base);line-height:1.7}

/* ---------------------------------------------------------------- 分区 */
.section{padding:var(--s-5) 0 0;margin-top:var(--s-5);border-top:1px solid var(--line)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-2);
  margin-bottom:var(--s-4);flex-wrap:wrap}
.sec-head h2{font-size:var(--t-xl);font-weight:700;margin:0;letter-spacing:0}
.sec-head p{margin:0;color:var(--ink-3);font-size:var(--t-md)}
.join{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
.join-card{
  border:1px solid var(--line);border-radius:var(--r-3);padding:var(--s-3);
  display:flex;flex-direction:column;gap:var(--s-2);min-height:200px;
  transition:border-color .15s,transform .15s;
}
.join-card:hover{border-color:var(--ink-3);transform:translateY(-2px)}
.join-card .ic{width:36px;height:36px;border-radius:var(--r-2);display:grid;place-items:center;
  border:1px solid var(--line);color:var(--blue);flex:none}
.join-card h3{margin:0;font-size:var(--t-lg);font-weight:700;line-height:1.35}
/* 说明限宽：卡片拉宽时一行别长到读不下去（约 30 字）。 */
.join-card p{margin:0;color:var(--ink-3);font-size:var(--t-md);line-height:1.7;max-width:30em}
.join-card .go{margin-top:auto;padding-top:var(--s-1);font-size:var(--t-md);font-weight:600;
  color:var(--blue)}
/* QQ 用墨色实底做层级：靠明度对比，不靠玻璃。 */
.join-card.dark{background:#111216;border-color:#111216;color:#fff}
html[data-mode="dark"] .join-card.dark{background:#1c1f26;border-color:#1c1f26}
.join-card.dark p{color:#a9adb8}
.join-card.dark .ic{border-color:#2b2e37;color:var(--cyan)}
.join-card.dark .go{color:#fff}
.join-card.dark:hover{border-color:#000}
html[data-mode="dark"] .join-card.dark:hover{border-color:#333842}

/* 举报条：整宽、扁平，左侧一条青色细线起头，不做发光边框。 */
.report{
  margin-top:var(--s-2);display:flex;align-items:center;gap:var(--s-3);
  border:1px solid var(--line);border-left:3px solid var(--cyan);
  border-radius:var(--r-2);padding:var(--s-3);
}
.report:hover{background:var(--paper-2)}
.report .ic{color:var(--blue);display:grid;place-items:center;flex:none}
.report h3{margin:0 0 var(--s-0);font-size:var(--t-lg);line-height:1.35}
.report p{margin:0;color:var(--ink-3);font-size:var(--t-md);line-height:1.7;max-width:34em}
.report .arrow{margin-left:auto;color:var(--blue);font-size:var(--t-md);font-weight:600;
  white-space:nowrap;flex:none}

/* ---------------------------------------------------------------- 页脚 */
.foot{border-top:1px solid var(--line);padding:var(--s-3) 0 var(--s-4);margin-top:var(--s-5)}
.foot-in{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);align-items:center;
  justify-content:space-between;font-size:var(--t-sm);color:var(--ink-3);line-height:1.7}
.foot nav{display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:center}
.foot a:hover{color:var(--ink)}
/* 管理入口做成小按钮：纯文字太容易被忽略，加大箭头又像在拉访客进后台。 */
.foot .admin-link{
  border:1px solid var(--line);border-radius:var(--r-2);padding:var(--s-0) var(--s-half);
  color:var(--ink-2);font-weight:600;
}
.foot .admin-link:hover{border-color:var(--ink-3);color:var(--ink);background:var(--paper-2)}
.noscript{margin:var(--s-3) auto 0;font-size:var(--t-md);color:var(--ink-3)}
.noscript a{color:var(--blue);text-decoration:underline}

/* ---------------------------------------------------------------- 响应式 */
@media(max-width:900px){
  /* 一栏时图在上、文在下，首屏上边距也收一点。 */
  .hero{grid-template-columns:1fr;gap:var(--s-3);padding-top:var(--s-4)}
  .poster{order:-1}
  .join{grid-template-columns:1fr}
  .join-card{min-height:0}
}
@media(max-width:720px){
  .wrap{width:calc(100% - 32px)}
  .nav{display:none}
  .mobile{display:block;margin-left:auto}
  .mobile summary{
    list-style:none;cursor:pointer;border:1px solid var(--line);border-radius:var(--r-2);
    padding:var(--s-1) var(--s-half);font-size:var(--t-md);min-height:44px;
    display:flex;align-items:center;
  }
  .mobile summary::-webkit-details-marker{display:none}
  .mobile nav{display:block;position:absolute;left:0;right:0;background:var(--paper);
    border-bottom:1px solid var(--line);padding:var(--s-1) var(--s-2) var(--s-half)}
  .mobile nav a{display:block;padding:var(--s-half) 0;border-bottom:1px solid var(--line-2);
    font-size:var(--t-base)}
  .notice{grid-template-columns:1fr;gap:var(--s-1)}
  .foot nav{gap:var(--s-2)}
}
/* ---------------------------------------------------------------- 赞助入口
   唯一的渐变用色。这条规则有意偏离"全站不用渐变"的既有约束：需求明确要求
   蓝紫渐变 + 流光 + 少量闪点，而它是首屏唯一的行动号召按钮。
   为了不破坏整体观感，做四点收敛：
     1. 只在这一个按钮上使用渐变，别处不得引用 --sponsor-* 令牌；
     2. 渐变从品牌蓝 #0b63ce 走到靛蓝，色相不偏离品牌色系；
     3. 流光只有一条 1px 斜向高光，扫过周期 6 秒，幅度很低；
     4. 闪点只有三颗 2–3px 的小点，透明度 0.5 上下。
   深色模式下用更亮的一档蓝紫，保证文字对比度。
   reduced-motion 下全部动画关闭（见文件末尾的媒体查询）。 */
:root{
  --sponsor-from:#0b63ce;
  --sponsor-to:#5b3fd6;
  --sponsor-hover-from:#0a54b4;
  --sponsor-hover-to:#4a30bd;
  --sponsor-ring:#8fb6ff;
  --sponsor-fg:#ffffff;
}
html[data-mode="dark"]{
  --sponsor-from:#2f7ff0;
  --sponsor-to:#8a6bf0;
  --sponsor-hover-from:#4a92f5;
  --sponsor-hover-to:#9c81f5;
  --sponsor-ring:#b9cdff;
}

/* 覆盖 .btn 的实心底：渐变按钮自己定义背景与边框。 */
.btn.sponsor{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border-color:transparent;
  color:var(--sponsor-fg);
  background-image:linear-gradient(135deg,var(--sponsor-from) 0%,var(--sponsor-to) 100%);
  box-shadow:0 1px 2px rgba(11,99,206,.28),0 6px 18px -8px rgba(91,63,214,.45);
  transition:box-shadow .2s ease,transform .15s ease;
}
.btn.sponsor:hover{
  background-image:linear-gradient(135deg,var(--sponsor-hover-from) 0%,var(--sponsor-hover-to) 100%);
  border-color:transparent;
  color:var(--sponsor-fg);
  box-shadow:0 2px 4px rgba(11,99,206,.32),0 10px 24px -8px rgba(91,63,214,.55);
}
.btn.sponsor:active{transform:translateY(1px)}
/* 键盘焦点：白底上要看得见，所以用一圈更亮的蓝环 + 贴近按钮的深色内环。 */
.btn.sponsor:focus-visible{
  outline:2px solid var(--sponsor-ring);
  outline-offset:2px;
}
.btn.sponsor .sponsor-label{position:relative;z-index:2}

/* 流光：一条低透明度斜向高光从左扫到右。 */
.btn.sponsor::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(115deg,
    rgba(255,255,255,0) 35%,
    rgba(255,255,255,.34) 48%,
    rgba(255,255,255,0) 62%);
  transform:translateX(-120%);
  animation:sponsor-sheen 6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes sponsor-sheen{
  0%,62%{transform:translateX(-120%)}
  78%{transform:translateX(120%)}
  100%{transform:translateX(120%)}
}

/* 闪点：三颗小点，各自不同周期与延迟，避免同频闪烁。 */
.btn.sponsor .sponsor-spark{
  position:absolute;
  z-index:1;
  width:3px;height:3px;border-radius:50%;
  background:#fff;
  opacity:0;
  pointer-events:none;
  animation:sponsor-spark 4.5s ease-in-out infinite;
}
.btn.sponsor .sponsor-spark.spark-2{
  width:2px;height:2px;
  right:12%;bottom:26%;
  animation-duration:5.6s;animation-delay:1.4s;
}
.btn.sponsor .sponsor-spark.spark-3{
  width:2px;height:2px;
  right:30%;top:22%;
  animation-duration:6.8s;animation-delay:3.1s;
}
/* 第一颗：默认位置（右上偏内），在窄屏换行时也不会被裁掉。 */
.btn.sponsor .sponsor-spark:not(.spark-2):not(.spark-3){
  right:8%;top:26%;
}
@keyframes sponsor-spark{
  0%,72%,100%{opacity:0;transform:scale(.6)}
  82%{opacity:.85;transform:scale(1)}
  92%{opacity:0;transform:scale(.6)}
}

/* 窄屏：按钮维持可点面积，闪点与流光保留但幅度下调。
   居中只写给 .btn.sponsor —— 之前写的是通用的 .hero-actions .btn，
   那会连"加入社区""服务器状态"两个既有按钮的对齐一起改掉；
   本次只新增赞助按钮，不应影响另外两个。 */
@media(max-width:640px){
  .btn.sponsor{padding:var(--s-half) var(--s-2);justify-content:center}
  .btn.sponsor::after{animation-duration:7.5s}
}

/* 既有规则只关过渡。流光与闪点是 animation，必须单独关掉，
   否则"减少动态效果"的用户仍会看到持续扫动的高光。 */
@media(prefers-reduced-motion:reduce){
  *{transition:none!important}
  .join-card:hover{transform:none}
  .btn.sponsor::after,
  .btn.sponsor .sponsor-spark{animation:none!important}
  .btn.sponsor::after{opacity:0}
  .btn.sponsor .sponsor-spark{opacity:0}
}