/* ===========================================================
   lottoff.fun 全站样式
   配色：紫 → 品红 → 粉（深紫底 + 玻璃拟态）
   圆角 UI 统一「半透明 + 背景模糊」，鼠标指向时按曲线放大、移开缩回。
   改配色只需要动下面 :root 里的变量。
   =========================================================== */
:root {
  /* 底色：深紫 → 近黑 */
  --bg-deep: #07040e;
  --bg: #0c0718;
  --bg-soft: rgba(178, 122, 255, .10);
  --bg-card: rgba(26, 12, 44, .52);

  --border: rgba(214, 150, 255, .30);
  --border-soft: rgba(214, 150, 255, .16);

  --text: #f7ecff;
  --text-dim: #c4aee0;
  --text-mute: #8d78ac;

  /* 主色调：紫 - 品红 - 粉 */
  --violet: #a778ff;
  --magenta: #ff5cc8;
  --pink: #ff9ad9;

  --accent: var(--magenta);
  --accent-2: var(--violet);
  --accent-3: var(--pink);
  --warn: #ff4d7e;

  /* 玻璃：半透明填充 + 背景模糊，全站圆角 UI 共用 */
  --glass-fill: linear-gradient(158deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .022) 46%, rgba(167, 120, 255, .07));
  --glass-blur: blur(18px) saturate(160%);
  --glass-line: rgba(255, 255, 255, .13);
  --glass-shadow: 0 18px 44px -22px rgba(0, 0, 0, .92), inset 0 1px 0 rgba(255, 255, 255, .09);

  --radius: 20px;
  --radius-sm: 12px;
  --shadow: 0 18px 46px -22px rgba(0, 0, 0, .9);
  --maxw: 1080px;

  /* 指向时的放大/缩小曲线（带一点回弹） */
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);

  --font: "Segoe UI", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", system-ui, sans-serif;
  --mono: "Cascadia Code", "JetBrains Mono", Consolas, "Courier New", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(900px 520px at 8% -10%, rgba(167, 120, 255, .22), transparent 62%),
    radial-gradient(760px 460px at 92% 2%, rgba(255, 92, 200, .18), transparent 62%),
    radial-gradient(circle at top, #17092c 0%, var(--bg-deep) 64%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* 两块固定的光斑：玻璃模糊需要有东西可以糊，顺便把整页染成紫粉 */
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .55;
}
body::before {
  width: 48vw; height: 48vw;
  left: -10vw; top: -12vw;
  background: radial-gradient(circle, rgba(167, 120, 255, .85), transparent 68%);
}
body::after {
  width: 54vw; height: 54vw;
  right: -16vw; top: 18vh;
  background: radial-gradient(circle, rgba(255, 92, 200, .6), transparent 68%);
}

a { color: var(--accent-3); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; }

/* 页面左右留白。
   注意：这几个元素如果要用 padding，务必写成 padding-block（只改上下），
   写成 padding: 74px 0 42px 这种简写会把左右留白覆盖成 0。 */
.hero,
.section,
.page-head { padding-inline: 20px; }

/* ---------- 顶部导航 ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  background: linear-gradient(180deg, rgba(20, 9, 36, .74), rgba(20, 9, 36, .46));
  border-bottom: 1px solid var(--glass-line);
  padding-top: env(safe-area-inset-top);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 10px 18px;
  min-height: 58px;
  padding: 6px 0;
  flex-wrap: wrap;
}
.nav .brand {
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  padding-inline: 20px;
  transition: transform .3s var(--ease-pop), color .2s;
}
.nav .brand:hover { text-decoration: none; color: var(--accent); transform: scale(1.04); }
.nav .brand .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: linear-gradient(140deg, var(--violet), var(--magenta));
  box-shadow: 0 0 14px rgba(255, 92, 200, .9);
  flex: none;
}
.nav .spacer { flex: 1; }
.nav .links { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 14px; padding-inline: 20px; }
/* 账号胶囊是 .nav-inner 的直接子元素（这样手机上能排到第一行右侧），
   桌面端只留右侧留白，看起来跟以前挤在链接行尾时一样 */
.nav .nav-inner > [data-account] { display: flex; align-items: center; padding-inline: 0 20px; }
/* 外链容器自己也是 flex 项，不给它 gap 的话「GitHubCloudflare」会挤成一坨 */
.nav .links > [data-site-links] { display: inline-flex; flex-wrap: wrap; gap: 8px 16px; }
/* 品牌和右侧链接各占一半留白，跟正文的 20px 对齐 */
.nav .links a { color: var(--text-dim); transition: color .2s; }
.nav .links a:hover { color: var(--accent-3); text-decoration: none; }

/* 手机端的规则统一放在文件最后（见「手机 / 窄屏」那一块）——
   媒体查询不加权重，写在这里的话会被下面的基础规则盖掉。 */

/* ---------- Hero ---------- */
.hero { padding-block: 74px 42px; }
.hero h1 {
  font-size: clamp(30px, 6vw, 52px);
  line-height: 1.2;
  letter-spacing: .01em;
  margin-bottom: 16px;
}
.hero h1 .grad {
  background: linear-gradient(94deg, var(--violet), var(--magenta) 55%, var(--pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero .lead {
  max-width: 620px;
  color: var(--text-dim);
  font-size: clamp(15px, 2.4vw, 17px);
}
.hero .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  border: 1px solid var(--glass-line);
  background: var(--glass-fill), var(--bg-soft);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  box-shadow: var(--glass-shadow);
  transition: transform .34s var(--ease-pop), box-shadow .28s var(--ease-out),
              border-color .28s, background .28s, filter .28s;
}
.btn:hover {
  text-decoration: none;
  transform: translateY(-2px) scale(1.05);
  border-color: rgba(255, 154, 217, .55);
  box-shadow: 0 18px 38px -18px rgba(255, 92, 200, .85), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.btn:active { transform: translateY(0) scale(.97); transition-duration: .12s; }
.btn.primary {
  background: linear-gradient(135deg, var(--violet), var(--magenta) 62%, var(--pink));
  border-color: rgba(255, 255, 255, .22);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 16px 36px -16px rgba(255, 92, 200, .95);
}
.btn.primary:hover { filter: brightness(1.06); }
.btn.ghost { background: var(--glass-fill), rgba(255, 255, 255, .03); }

/* ---------- 区块标题 ---------- */
.section { padding-block: 34px 10px; }
.section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.section-head h2 { font-size: 21px; letter-spacing: .02em; }
.section-head h2::after {
  content: "";
  display: block;
  width: 42px;
  height: 3px;
  margin-top: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--violet), var(--magenta), var(--pink));
}
.section-head .hint { color: var(--text-mute); font-size: 13px; }

/* ---------- 项目卡片（玻璃 + 指向放大） ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  background: var(--glass-fill), var(--bg-card);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
  transition: transform .38s var(--ease-pop), border-color .3s var(--ease-out),
              box-shadow .3s var(--ease-out);
}
.card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--magenta), var(--pink), transparent);
  opacity: 0;
  transition: opacity .3s;
}
.card:hover,
.card:focus-visible {
  transform: translateY(-6px) scale(1.05);
  border-color: rgba(255, 154, 217, .45);
  text-decoration: none;
  box-shadow: 0 26px 52px -22px rgba(255, 92, 200, .7), inset 0 1px 0 rgba(255, 255, 255, .13);
}
.card:hover::after { opacity: 1; }
.card:active { transform: translateY(-1px) scale(.99); transition-duration: .12s; }
.card .icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  font-size: 24px;
  border-radius: 14px;
  background: linear-gradient(150deg, rgba(167, 120, 255, .22), rgba(255, 92, 200, .14));
  border: 1px solid rgba(255, 154, 217, .3);
  transition: transform .38s var(--ease-pop);
}
.card:hover .icon { transform: scale(1.12) rotate(-4deg); }
.card h3 { font-size: 18px; color: var(--text); }
.card .tagline { color: var(--text-dim); font-size: 14px; }
.card .desc { color: var(--text-mute); font-size: 13.5px; }
.card .tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.tag {
  font-size: 12px;
  color: var(--accent-3);
  background: rgba(255, 92, 200, .10);
  border: 1px solid rgba(255, 122, 217, .28);
  border-radius: 999px;
  padding: 2px 10px;
  transition: transform .3s var(--ease-pop), border-color .25s;
}
.card:hover .tag { transform: translateY(-1px); }
.tag:hover { transform: scale(1.08); border-color: var(--accent-3); }
.card .foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
  font-size: 13px;
  color: var(--text-mute);
}
.card .open { color: var(--accent-3); font-weight: 600; transition: transform .34s var(--ease-pop); }
.card:hover .open { transform: translateX(3px) scale(1.05); }

.empty {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 34px 22px;
  text-align: center;
  color: var(--text-mute);
  background: var(--glass-fill), rgba(255, 255, 255, .02);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

/* ---------- 关于 / 列表 ---------- */
.about {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
}
.panel {
  background: var(--glass-fill), var(--bg-card);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
  padding: 22px;
}
.panel h3 { font-size: 16px; margin-bottom: 12px; color: var(--text); }
.panel p { color: var(--text-dim); font-size: 14.5px; }
.kv { display: grid; gap: 10px; }
.kv .row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  padding-bottom: 9px;
  border-bottom: 1px dashed var(--border-soft);
}
.kv .row:last-child { border-bottom: none; padding-bottom: 0; }
.kv .k { color: var(--text-mute); }
.kv .v { color: var(--text); font-family: var(--mono); font-size: 13px; }

/* ---------- 页脚 ---------- */
.footer {
  margin-top: 58px;
  border-top: 1px solid var(--glass-line);
  padding: 26px 0 calc(30px + env(safe-area-inset-bottom));
  color: var(--text-mute);
  font-size: 13px;
}
.footer-inner { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; padding-inline: 20px; }
.footer a { color: var(--text-dim); }
.footer a:hover { color: var(--accent-3); }

/* ---------- 项目详情页通用 ---------- */
.page-head { padding-block: 46px 8px; }
.page-head h1 { font-size: clamp(24px, 5vw, 36px); margin-bottom: 10px; }
.page-head .meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.crumb { font-size: 13.5px; color: var(--text-mute); margin-bottom: 16px; display: block; }
.crumb a { color: var(--text-dim); }
.crumb a:hover { color: var(--accent-3); }

:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* ===========================================================
   手机 / 窄屏
   放在文件最后：媒体查询不加权重，写在前面的会被后面的基础规则盖掉。
   =========================================================== */

/* 窄屏统一单列。
   用 minmax(0, 1fr) 而不是 1fr：1fr 的最小尺寸是「内容最小宽度」，
   卡片里只要有个不肯换行的东西，整列就会被顶宽、手机上横向溢出。 */
@media (max-width: 760px) {
  .about { grid-template-columns: minmax(0, 1fr); }
  .cards { grid-template-columns: minmax(0, 1fr); }
}
/* 平板 / 大手机（621–760）：桌面和手机之间的中间档 */
@media (min-width: 621px) and (max-width: 760px) {
  .hero { padding-block: 46px 26px; }
  .nav .links { gap: 14px; font-size: 13px; }
  .section { padding-block: 26px 8px; }
}

/* ---------- 手机导航：第一行 品牌 + 账号，第二行 可横滑的链接条 ----------
   为什么不沿用「让链接自动换行」：那样第一行只有品牌、白白占一行，
   链接的点击高度也才 21px（远低于手指舒服的 40px+）。
   现在第一行品牌和账号并排，第二行是 40px 高的胶囊，横着滑。 */
@media (max-width: 620px) {
  .nav-inner {
    flex-wrap: wrap;
    gap: 0;
    min-height: 0;
    padding: 0;
  }
  .nav .brand {
    order: 1;
    min-height: 44px;
    padding-inline: 14px;
    font-size: 15px;
    letter-spacing: .02em;
  }
  .nav .spacer { display: none; }
  .nav .nav-inner > [data-account] {
    order: 2;
    margin-left: auto;
    padding-inline: 14px;
    min-height: 44px;
  }
  .nav .links {
    order: 3;
    flex: 1 1 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    font-size: 14px;
    padding: 0 12px 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .nav .links::-webkit-scrollbar { display: none; }
  /* 外链容器展开，让 GitHub / Cloudflare 跟站内链接一样参与横滑 */
  .nav .links > [data-site-links] { display: contents; }
  .nav .links a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 13px;
    white-space: nowrap;
    border-radius: 999px;
    background: rgba(255, 255, 255, .045);
    border: 1px solid var(--glass-line);
  }
  .nav .links a:active { background: rgba(255, 255, 255, .1); }

  /* 整体节奏：留白收紧，少滚两屏 */
  .hero, .section, .page-head { padding-inline: 14px; }
  .footer-inner { padding-inline: 14px; }
  .hero { padding-block: 30px 18px; }
  .hero h1 { font-size: clamp(26px, 7.6vw, 34px); letter-spacing: 0; margin-bottom: 12px; }
  .hero .lead { font-size: 14.5px; }
  .hero .cta { margin-top: 20px; gap: 10px; }
  /* 按钮撑得更宽、46px 高，单手好点 */
  .btn { flex: 1 1 46%; min-height: 46px; padding: 12px 16px; font-size: 15px; }

  .section { padding-block: 20px 6px; }
  .section-head { margin-bottom: 14px; gap: 8px; }
  .section-head h2 { font-size: 19px; }
  .section-head h2::after { width: 34px; margin-top: 5px; }
  .cards { gap: 14px; }
  .card { padding: 17px; gap: 10px; border-radius: 18px; }
  .card .icon { width: 42px; height: 42px; font-size: 22px; border-radius: 13px; }
  .card h3 { font-size: 17px; }
  .card .tagline { font-size: 13.5px; }
  .card .desc { font-size: 12.5px; }
  .card .foot { padding-top: 10px; font-size: 12.5px; }
  .panel { padding: 17px; }
  .boards { gap: 14px; }
  .about { gap: 14px; }
  .footer { margin-top: 34px; padding: 20px 0 calc(24px + env(safe-area-inset-bottom)); }

  /* iOS 对 background-attachment: fixed 支持很差（背景会糊 / 错位），手机上让它跟着滚 */
  body { background-attachment: scroll; }
  body::before, body::after { opacity: .38; }
}

/* 小屏（iPhone SE 这类 320px）：再收一点 */
@media (max-width: 360px) {
  .nav .brand { font-size: 14px; }
  .hero h1 { font-size: 25px; }
  .btn { flex: 1 1 100%; }
  .card .desc { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
  .card:hover, .btn:hover { transform: none; }
}