/* ============================================================
   Astra Zhou — Aero / Liquid Glass
   Windows Vista 的磨砂光泽 + iOS 26 / HyperOS 的液态玻璃
   ============================================================ */

:root {
  color-scheme: light dark;

  /* 文字与线条 */
  --fg: #141c0b;
  --muted: #43502c;
  --line: rgba(77, 124, 15, .26);
  --accent: #4d7c0f;
  --bg: #ffffff;
  --code-bg: rgba(255, 255, 255, .5);
  --max: 46rem;

  /* 玻璃参数 */
  --glass-bg: rgba(255, 255, 255, .38);
  --glass-bg-2: rgba(255, 255, 255, .50);
  --glass-border: rgba(255, 255, 255, .60);
  --glass-hi: rgba(255, 255, 255, .78);
  --glass-shadow: 0 18px 46px rgba(38, 62, 8, .20), 0 1px 3px rgba(38, 62, 8, .07);
  --blur: blur(20px) saturate(160%);
  --blur-2: blur(10px) saturate(150%);
  /* 圆角只用三档：外框 / 卡片 / 小元素 */
  --radius: 22px;
  --radius-md: 14px;
  --radius-sm: 9px;
  --flow: rgba(228, 255, 170, .20);
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* 壁纸 */
  /* ---------- Windows Vista「Aurora」壁纸 ----------
     深青绿底 + 中央一道亮绿绸缎 + 青色辉光 */
  --wall-1: #0d332c;      /* 上部青绿 */
  --wall-2: #051a17;      /* 中段深青 */
  --wall-3: #010a09;      /* 底部近黑 */
  --wall-glow: rgba(64, 255, 186, .34);    /* 主光：翠绿 */
  --wall-glow-2: rgba(56, 200, 224, .26);  /* 副光：青蓝 */
  --wall-glow-3: rgba(96, 255, 154, .24);  /* 底部绿光 */
  --aurora-1: rgba(130, 255, 214, .20);    /* 主绸缎 */
  --aurora-2: rgba(90, 226, 255, .14);     /* 青色副带 */
  --aurora-3: rgba(150, 255, 190, .13);    /* 绿副带 */
  --aurora-4: rgba(70, 190, 220, .09);     /* 远景淡青 */
}

@media (prefers-color-scheme: dark) {
  :root {
    --fg: #f2fae0;
    --muted: #c2d4a6;
    --line: rgba(190, 242, 100, .24);
    --accent: #a3e635;
    --bg: rgba(14, 20, 10, .92);
    --code-bg: rgba(255, 255, 255, .07);

    --glass-bg: rgba(20, 28, 13, .48);
    --glass-bg-2: rgba(255, 255, 255, .05);
    --glass-border: rgba(255, 255, 255, .16);
    --glass-hi: rgba(255, 255, 255, .22);
    --glass-shadow: 0 18px 46px rgba(0, 0, 0, .48), 0 1px 3px rgba(0, 0, 0, .28);
    --flow: rgba(163, 230, 53, .10);

    --wall-1: #0a2621;
    --wall-2: #04120f;
    --wall-3: #000806;
    --wall-glow: rgba(64, 255, 186, .26);
    --wall-glow-2: rgba(56, 200, 224, .20);
    --wall-glow-3: rgba(96, 255, 154, .20);
    --aurora-1: rgba(130, 255, 214, .15);
    --aurora-2: rgba(90, 226, 255, .11);
    --aurora-3: rgba(150, 255, 190, .10);
    --aurora-4: rgba(70, 190, 220, .07);
  }
}

/* ---------- 字体：Comic Neue（Comic Sans 的开源等价字体）---------- */
@font-face {
  font-family: "Comic Neue";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/comic-neue-400.woff2") format("woff2");
}

@font-face {
  font-family: "Comic Neue";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/comic-neue-700.woff2") format("woff2");
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background-color: var(--wall-3);
  /* Aurora：中央一道纵向光柱，四周沉入深青 */
  background-image:
    radial-gradient(58% 120% at 44% 48%, var(--wall-1) 0%, transparent 66%),
    radial-gradient(120% 80% at 50% 118%, var(--wall-1) 0%, transparent 64%),
    radial-gradient(110% 70% at 52% -20%, var(--wall-1) 0%, transparent 62%),
    linear-gradient(172deg, var(--wall-1) 0%, var(--wall-2) 46%, var(--wall-3) 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--fg);
  background: transparent;
  font: 16px/1.8 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
}

/* 壁纸上的柔光斑 */
body::before {
  content: "";
  position: fixed;
  inset: -15%;
  z-index: 0;
  pointer-events: none;
  background:
    /* 中央偏左的主光晕（Aurora 的亮区） */
    radial-gradient(46% 62% at 40% 46%, var(--wall-glow), transparent 70%),
    /* 右上青蓝辉光 */
    radial-gradient(48% 42% at 88% 8%, var(--wall-glow-2), transparent 70%),
    /* 左下绿光 */
    radial-gradient(50% 44% at 6% 66%, var(--wall-glow-3), transparent 72%),
    /* 右下淡青 */
    radial-gradient(52% 44% at 96% 82%, var(--wall-glow-2), transparent 72%),
    /* 底部托光 */
    radial-gradient(84% 54% at 48% 110%, var(--wall-glow), transparent 74%);
}

/* ---------- Aero Aurora：斜向绸缎光带（Vista 壁纸的标志） ---------- */
body::after {
  content: "";
  position: fixed;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
  background:
    /* 主绸缎：宽而亮的一道，带高光芯 */
    linear-gradient(99deg,
      transparent 28%,
      var(--aurora-1) 40%,
      rgba(230, 255, 250, .07) 45%,
      var(--aurora-1) 50%,
      transparent 62%),
    /* 青色副带 */
    linear-gradient(93deg, transparent 42%, var(--aurora-2) 54%, transparent 66%),
    /* 绿色副带 */
    linear-gradient(108deg, transparent 58%, var(--aurora-3) 69%, transparent 80%),
    /* 远景淡青 */
    linear-gradient(85deg, transparent 70%, var(--aurora-4) 79%, transparent 89%);
  transform: rotate(-4deg) scale(1.1);
  mix-blend-mode: screen;
}

/* ---------- 主容器：一块悬浮的玻璃窗 ---------- */
.wrap {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 2.4rem auto;
  padding: 0 clamp(1.15rem, 4.6vw, 2.9rem) .6rem;
  /* 必须裁剪：否则 ::after 的流动光斑会溢出圆角，露出直角的边 */
  overflow: hidden;
  /* 不吸顶了，所以这里可以放心用 backdrop-filter 做真玻璃 */
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}

/* Aero 顶部光泽 */
.wrap::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 34%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 76%);
}

/* 液态玻璃：缓慢流动的高光 */
.wrap::after {
  content: "";
  position: absolute;
  inset: -35%;
  pointer-events: none;
  background: radial-gradient(closest-side, var(--flow), transparent 72%);
  animation: liquidFlow 24s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes liquidFlow {
  0%   { transform: translate3d(-22%, -12%, 0) scale(1); }
  50%  { transform: translate3d(8%, 15%, 0) scale(1.12); }
  100% { transform: translate3d(26%, -6%, 0) scale(1); }
}

.wrap > * { position: relative; z-index: 1; }

/* ---------- 顶栏 ---------- */
header.site {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.25rem;
  padding: 1.9rem 0 1.5rem;
  /* 不要分隔线：靠留白和下面的大标题自己分层次 */
}

header.site .brand {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: "Comic Neue", "Comic Sans MS", "Comic Sans", cursive;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--fg);
  text-decoration: none;
}

header.site .brand .avatar {
  width: 30px;
  height: 30px;
  /* 小米 logo 那种「超椭圆」：方中带圆，不是正圆也不是普通圆角 */
  border-radius: 30%;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .45), 0 2px 6px rgba(20, 40, 10, .18);
}

/* ---------- 左上角「返回主页」 ---------- */
header.site .back-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  color: var(--muted);
  background: var(--glass-bg-2);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 4px 12px rgba(40, 68, 8, .16);
  -webkit-backdrop-filter: var(--blur-2);
  backdrop-filter: var(--blur-2);
  transition: color .22s, border-color .22s, transform .22s, box-shadow .22s;
}
header.site .back-home:hover {
  color: var(--accent);
  border-color: var(--accent);
  transform: translateX(-2px);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 6px 18px rgba(40, 68, 8, .26);
}

/* ---------- 导航：液态玻璃按钮 ---------- */
header.site nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: .4rem; }

header.site nav a {
  position: relative;
  overflow: hidden;
  color: var(--muted);
  text-decoration: none;
  font-size: .94rem;
  padding: .38rem .9rem;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-2);
  -webkit-backdrop-filter: var(--blur-2);
  backdrop-filter: var(--blur-2);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 4px 12px rgba(40, 68, 8, .14);
  transition: color .25s, border-color .25s, transform .25s, box-shadow .25s;
}

/* 液态高光：鼠标划过时一道光泽扫过按钮 */
header.site nav a::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 25%, rgba(255, 255, 255, .55) 50%, transparent 75%);
  transform: translateX(-130%);
  transition: transform .65s ease;
}
header.site nav a:hover::after,
header.site nav a[aria-current="page"]::after { transform: translateX(130%); }

header.site nav a:hover,
header.site nav a[aria-current="page"] {
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 8px 20px rgba(40, 68, 8, .22);
}

/* ---------- 正文 ---------- */
main {
  padding: 2.8rem 0 3.8rem;
}

.lead { color: var(--muted); line-height: 1.75; margin: 0 0 2.2rem; }

/* ---------- 文章列表：一张张玻璃卡片 ---------- */
/* ---------- 首页一言：左图右文的不对称双栏 ---------- */
.quote-row {
  display: flex;
  align-items: center;      /* 笑脸垂直居中在文字块中间 */
  gap: 1.1rem;
}
.quote-mac { flex: none; }
.quote-body { flex: 1 1 auto; min-width: 0; }
.quote-body .quote-title { margin-bottom: .55rem; }

/* ---------- 首页正文里的导航按钮 ---------- */
.home-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
  margin: 2.4rem 0 0;
}

@media (min-width: 620px) {
  .home-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.home-nav a {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.1rem;
  color: var(--fg);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-2);
  -webkit-backdrop-filter: var(--blur-2);
  backdrop-filter: var(--blur-2);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 10px 24px rgba(40, 68, 8, .18);
  transition: color .25s, border-color .25s, transform .25s, box-shadow .25s;
}

.home-nav a::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 25%, rgba(255, 255, 255, .6) 50%, transparent 75%);
  transform: translateX(-130%);
  transition: transform .7s ease;
}
.home-nav a:hover::after { transform: translateX(130%); }

.home-nav a:hover,
.home-nav a:active {
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 14px 30px rgba(40, 68, 8, .26);
}

/* ---------- 小游戏列表卡片 ---------- */
.game-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: .8rem;
  margin: 2.2rem 0 0;
}

@media (min-width: 620px) {
  .game-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.game-list .game-card {
  position: relative;
  overflow: hidden;
  display: block;
  padding: 1.3rem 1.35rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  background: var(--glass-bg-2);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 10px 24px rgba(40, 68, 8, .18);
  -webkit-backdrop-filter: var(--blur-2);
  backdrop-filter: var(--blur-2);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, border-color .3s;
}

.game-list .game-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 25%, rgba(255, 255, 255, .55) 50%, transparent 75%);
  transform: translateX(-130%);
  transition: transform .7s ease;
}
.game-list .game-card:hover::after { transform: translateX(130%); }

.game-list .game-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 16px 34px rgba(40, 68, 8, .26);
}

.game-card-t {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--fg);
  transition: color .25s;
}
.game-list .game-card:hover .game-card-t { color: var(--accent); }

.game-card-d {
  display: block;
  margin-top: .4rem;
  font-size: .86rem;
  line-height: 1.6;
  color: var(--muted);
}

ul.posts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .8rem;
}

ul.posts li {
  padding: 1.15rem 1.3rem;
  background: var(--glass-bg-2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 10px 26px rgba(20, 40, 10, .10);
  -webkit-backdrop-filter: var(--blur-2);
  backdrop-filter: var(--blur-2);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, background .3s;
}
ul.posts li:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 18px 40px rgba(20, 40, 10, .18);
}

ul.posts li:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 16px 34px rgba(40, 68, 8, .22);
}

ul.posts li.empty {
  text-align: center;
  color: var(--muted);
  background: none;
  border-style: dashed;
  border-color: var(--line);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

ul.posts li.empty:hover { transform: none; box-shadow: none; }

ul.posts a.title {
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--fg);
  transition: color .25s;
}

ul.posts a.title:hover { color: var(--accent); }

ul.posts time {
  display: block;
  margin-top: .3rem;
  font-size: .85rem;
  color: var(--muted);
}

ul.posts .views {
  display: block;
  margin-top: .15rem;
  font-size: .84rem;
  color: var(--muted);
}

/* ---------- 文章页 ---------- */
article header { margin-bottom: 2rem; }
article header h1 { margin-bottom: .35rem; }
article header .meta { color: var(--muted); font-size: .88rem; }

article p { margin: 0 0 1.1rem; }
article ul, article ol { margin: 0 0 1.1rem; padding-left: 1.4rem; }
article li { margin: .3rem 0; }

article img { max-width: 100%; height: auto; border-radius: var(--radius-md); }

blockquote {
  margin: 1.5rem 0;
  padding: .7rem 1rem;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--glass-bg-2);
  box-shadow: inset 0 1px 0 var(--glass-hi);
  -webkit-backdrop-filter: var(--blur-2);
  backdrop-filter: var(--blur-2);
  color: var(--muted);
}

code {
  background: var(--code-bg);
  padding: .12em .4em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
}

pre {
  background: var(--code-bg);
  padding: 1rem 1.1rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 var(--glass-hi);
  -webkit-backdrop-filter: var(--blur-2);
  backdrop-filter: var(--blur-2);
  overflow-x: auto;
}

pre code { background: none; border: none; padding: 0; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

/* 文章末尾的点赞按钮 */
.like-wrap { margin: 1.6rem 0 0; }
button.like {
  font: inherit;
  font-size: .9rem;
  padding: .45rem .95rem;
  border-radius: 999px;
  cursor: pointer;
  color: var(--fg);
  background: var(--glass-bg-2);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-hi);
  transition: transform .2s, color .2s, border-color .2s;
}
button.like:hover { transform: translateY(-1px); color: var(--accent); border-color: var(--accent); }
button.like.liked { color: var(--accent); border-color: var(--accent); cursor: default; }
button.like.liked:hover { transform: none; }

/* 文章末尾的拍摄器材等说明 */
article p.exif {
  margin: 2.2rem 0 0;
  font-size: .84rem;
  color: var(--muted);
  line-height: 1.7;
}


/* ---------- 页脚 ---------- */
footer.site {
  padding: .2rem 0 .4rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .88rem;
}

footer.site a { color: var(--muted); }

/* ---------- 小屏 ---------- */
@media (max-width: 700px) {
  .wrap {
    margin: .7rem;
    padding: 0 1.1rem .3rem;
    border-radius: var(--radius);
  }
  header.site { padding: 1.5rem 0 1rem; }
  main { padding: 1.6rem 0 2.4rem; }
}

/* ---------- 动效敏感 / 不支持毛玻璃时的降级 ---------- */
@media (prefers-reduced-motion: reduce) {
  .wrap::after { animation: none; }
  ul.posts li { transition: none; }
}

@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  .wrap { background: rgba(255, 255, 255, .93); }
  ul.posts li, blockquote, pre { background: rgba(255, 255, 255, .72); }
}

@media (prefers-color-scheme: dark) {
  @supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
    .wrap { background: rgba(12, 18, 6, .96); }
    ul.posts li, blockquote, pre { background: rgba(255, 255, 255, .08); }
  }
}


/* ---------- 动效统一：平滑的 ease-out，不做弹跳 ---------- */
a, button, summary, input, textarea, select, ul.posts li, .home-nav a, .game-list .game-card {
  transition-timing-function: var(--ease);
}

/* 减少无谓的视觉噪音：发丝级描边统一压到更细的观感 */