/* =====================================================================
 * footer.css —— 页脚 FOOTER
 * 品牌 / 导航 / 联系方式 → 阁友须知（对应官网「健康游戏忠告」）→ 版权与备案
 * ===================================================================== */
.footer {
  min-height: 0;
  background: linear-gradient(180deg, #031113 0%, #020a0b 100%);
  border-top: 1px solid var(--c-line);
}
.footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--c-primary) 30%, var(--c-primary) 70%, transparent);
  opacity: .35;
}
.footer__inner {
  position: relative; z-index: 2;
  padding: clamp(36px, 6vh, 60px) calc(var(--rail-w) + var(--gutter)) 24px;
  font-size: 14px;
}

.footer__top {
  display: grid; grid-template-columns: minmax(240px, 1.1fr) minmax(0, 1.5fr) minmax(240px, 1fr);
  gap: 32px 56px; align-items: start;
  padding-bottom: 28px; border-bottom: 1px solid var(--c-line);
}
.footer__brand { display: flex; align-items: flex-start; gap: 16px; }
.footer__logo { width: 64px; height: 64px; object-fit: contain; flex: none; }
.footer__name { display: flex; flex-direction: column; line-height: 1.2; }
.footer__name b { font-family: var(--f-serif); font-weight: 900; font-size: 24px; letter-spacing: .18em; }
.footer__name i { margin-top: 4px; font-family: var(--f-en); font-weight: 700; font-size: 11px; letter-spacing: .36em; color: var(--c-rim); }
.footer__slogan { margin-top: 8px; font-size: 13px; letter-spacing: .2em; color: var(--c-muted); }
.footer__event { margin-top: 10px; padding-left: 10px; border-left: 1px solid var(--c-line-2); font-size: 12.5px; line-height: 1.85; letter-spacing: .04em; color: var(--c-dim); }

.footer__label { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; font-size: 13px; letter-spacing: .2em; color: var(--c-muted); }
.footer__label i { font-family: var(--f-en); font-weight: 700; font-size: 12px; letter-spacing: .3em; color: var(--c-rim); }

.footer__nav ul { display: grid; grid-template-columns: repeat(3, max-content); gap: 10px 36px; }
.footer__nav a { display: inline-flex; align-items: baseline; gap: 10px; color: var(--c-text); transition: color .3s; }
.footer__nav a i { font-family: var(--f-en); font-weight: 700; font-size: 11px; letter-spacing: .24em; color: var(--c-dim); transition: color .3s; }
.footer__nav a:hover { color: var(--c-glow); }
.footer__nav a:hover i { color: var(--c-rim); }

.footer__email { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-en); font-weight: 600; font-size: 16px; letter-spacing: .06em; color: var(--c-text); transition: color .3s; word-break: break-all; }
.footer__email::before { content: ""; width: 6px; height: 6px; flex: none; background: var(--c-primary); }
.footer__email:hover { color: var(--c-glow); }
.footer__socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.footer__social {
  display: inline-flex; flex-direction: column; justify-content: center;
  min-height: 44px; padding: 5px 12px;
  border: 1px solid var(--c-line-2); line-height: 1.3;
  transition: background-color .3s, border-color .3s, color .3s;
}
.footer__social b { font-size: 13px; letter-spacing: .1em; }
.footer__social i { font-family: var(--f-en); font-weight: 600; font-size: 10px; letter-spacing: .2em; color: var(--c-rim); }
a.footer__social:hover { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); }
a.footer__social:hover i { color: var(--c-on-primary); }

/* 阁友须知 */
.footer__notice {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 28px;
  margin-top: 24px; padding: 16px 22px;
  border: 1px solid var(--c-line); border-left: 2px solid var(--c-primary);
  background: rgba(var(--c-primary-rgb), .035);
}
.footer__notice-title { display: flex; flex-direction: column; line-height: 1.3; }
.footer__notice-title b { font-family: var(--f-serif); font-weight: 900; font-size: 16px; letter-spacing: .2em; }
.footer__notice-title i { font-family: var(--f-en); font-weight: 700; font-size: 11px; letter-spacing: .3em; color: var(--c-rim); }
.footer__notice ul { display: flex; flex-wrap: wrap; gap: 4px 0; }
.footer__notice li { font-size: 13px; letter-spacing: .06em; color: var(--c-muted); }
.footer__notice li + li::before { content: "/"; margin: 0 14px; color: var(--c-dim); }

.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px;
  margin-top: 20px;
  font-size: 12.5px; letter-spacing: .06em; color: var(--c-dim);
}
.footer__icp { transition: color .3s; }
.footer__icp:hover { color: var(--c-rim); }
.footer__totop {
  display: inline-flex; align-items: center; gap: 10px; margin-left: auto;
  padding: 8px 14px; border: 1px solid var(--c-line-2); color: var(--c-text);
  font-size: 13px; letter-spacing: .14em;
  transition: background-color .3s, border-color .3s, color .3s;
}
.footer__totop i { font-family: var(--f-en); font-weight: 700; font-size: 11px; letter-spacing: .24em; color: var(--c-rim); }
.footer__totop svg { width: 14px; height: 14px; }
.footer__totop:hover { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); }
.footer__totop:hover i { color: var(--c-on-primary); }

/* ---------------------------------------------------------------------
 * 平板 / 移动端
 * ------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 1023px) {
  .footer__inner { padding: 36px 20px 28px; }
  .footer__top { grid-template-columns: 1fr; gap: 26px; }
  .footer__nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
  .footer__nav a { flex-wrap: wrap; gap: 0 8px; }
  .footer__notice { grid-template-columns: 1fr; padding: 14px 16px; }
  .footer__notice ul { display: grid; gap: 4px; }
  .footer__notice li + li::before { content: none; }
  .footer__notice li { padding-left: 14px; position: relative; }
  .footer__notice li::after { content: ""; position: absolute; left: 0; top: .72em; width: 5px; height: 5px; background: var(--c-line-3); transform: rotate(45deg); }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .footer__totop { margin-left: 0; }
}