@charset "UTF-8";
/* 鼓捣星球 · 中秋皮肤 2026 —— 开关、日期门在配套的 mid-autumn-2026 脚本里。
   只在 html.zg-festival-mid-autumn 下生效;挂饰(月亮/灯笼/祝福条)只在 html.zgf-deco 下出现。
   全部 absolute + pointer-events:none,不改字号、不加载图片;动画只用 transform / opacity。
   祝福条占的 30px 用 #topnav 的 margin-bottom 在首帧就留好(类名由 <head> 里的同步脚本加),不挤不跳。 */

/* ── 主题色(点 × 后也保留)────────────────────────────── */
html.zg-festival-mid-autumn #topnav .logo{position:relative}
html.zg-festival-mid-autumn #topnav .logo::after{
  content:"\1F430";content:"\1F430" / "";
  position:absolute;top:-7px;right:-15px;
  font:400 14px/1 "Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;letter-spacing:0;
  pointer-events:none;filter:drop-shadow(0 0 3px rgba(243,213,138,.6))}
/* 首页:大标题那行、选中的筛选/排序按钮、投稿按钮换暖金(只在这几个元素上覆盖变量) */
html.zgf-home :is(.who-line,.fchip,.sort-chip,.wide-chip,#submitCta){--accent:#e2ad4a;--accent-soft:#ecc570}
html.zgf-home .who-line{color:#b9ad96}

/* ── 祝福条(顶栏正下方,居中,可关)──────────────────── */
html.zgf-deco #topnav{position:relative;margin-bottom:30px}
.zgf-ribbon{
  position:absolute;z-index:1;left:0;right:0;top:100%;height:30px;padding:0 58px;
  display:flex;align-items:center;justify-content:center;gap:4px;
  background:linear-gradient(90deg,#171a21 0%,#34221a 32%,#3d2719 50%,#34221a 68%,#171a21 100%);
  border-bottom:1px solid rgba(233,185,73,.3);
  color:#f3d58a;font:500 13px/1 "Motiva Sans","Segoe UI","Microsoft YaHei",sans-serif;letter-spacing:1px;
  white-space:nowrap;pointer-events:none}
.zgf-text{overflow:hidden;text-overflow:ellipsis;min-width:0}
.zgf-x{
  pointer-events:auto;flex:none;width:26px;height:26px;margin:0;padding:0;border:0;border-radius:50%;
  background:transparent;color:#d8c38e;font:400 18px/26px Arial,sans-serif;cursor:pointer}
.zgf-x:hover{background:rgba(243,213,138,.14);color:#fff}
.zgf-x:focus-visible{outline:2px solid #f3d58a;outline-offset:1px}

/* ── 挂饰层:盖在顶栏上、不接鼠标;灯笼从顶栏下沿垂下 ─────── */
.zgf-layer{position:absolute;z-index:2;left:0;right:0;top:0;bottom:0;pointer-events:none}
.zgf-lantern{
  --w:14px;--h:12px;--s:4px;
  position:absolute;top:calc(100% + var(--s));width:var(--w);height:var(--h);border-radius:50%/44%;
  background:
    repeating-linear-gradient(90deg,transparent 0 22%,rgba(122,10,6,.32) 22% 26%),
    radial-gradient(ellipse at 50% 40%,#ff9d6a 0,#ec3b2c 36%,#bb160f 76%,#8c0d09 100%);
  box-shadow:0 0 8px rgba(255,86,48,.45);
  transform-origin:50% calc(var(--s) * -1);
  animation:zgf-swing 1.8s ease-in-out infinite alternate}
.zgf-lantern::before{ /* 吊绳 + 上盖 */
  content:"";position:absolute;left:25%;width:50%;bottom:calc(100% - 1px);height:calc(var(--s) + 3px);
  background:linear-gradient(#f0c35a,#c99a38) bottom/100% 3px no-repeat,
             linear-gradient(#b99b5d,#b99b5d) top/1px calc(100% - 3px) no-repeat}
.zgf-lantern::after{ /* 下盖 + 穗子 */
  content:"";position:absolute;left:25%;width:50%;top:calc(100% - 1px);height:calc(var(--h) * .55);
  background:linear-gradient(#c99a38,#f0c35a) top/100% 3px no-repeat,
             linear-gradient(#f0c35a,#d42a1f 45%,#a8120d) bottom/2px calc(100% - 3px) no-repeat}
.zgf-l1{left:10px}
.zgf-l2{left:32px;--s:7px;animation-duration:2s;animation-delay:-.7s}
.zgf-l3{right:38px;animation-duration:1.9s;animation-delay:-1.2s}

/* 满月:默认小的一轮,落在祝福条右端 */
.zgf-moon{
  --d:20px;position:absolute;right:10px;top:calc(100% + 5px);width:var(--d);height:var(--d);border-radius:50%;
  background:radial-gradient(circle at 38% 36%,#fffef6 0,#fff2c2 34%,#f6d98a 68%,#e8bd62 100%);
  box-shadow:0 0 5px 1px rgba(255,230,150,.5)}
.zgf-moon::before{ /* 光晕:淡黄到透明。用 box-shadow 画,不撑出横向滚动条 */
  content:"";position:absolute;left:0;top:0;right:0;bottom:0;border-radius:50%;
  box-shadow:0 0 calc(var(--d) * .55) calc(var(--d) * .22) rgba(255,232,160,.42),
             0 0 calc(var(--d) * 1.3) calc(var(--d) * .45) rgba(255,220,130,.15);
  animation:zgf-glow 5s ease-in-out infinite alternate}
.zgf-moon::after{ /* 月面淡影 */
  content:"";position:absolute;left:0;top:0;right:0;bottom:0;border-radius:50%;
  background:radial-gradient(circle at 62% 58%,rgba(214,176,98,.34) 0 9%,transparent 10%),
             radial-gradient(circle at 40% 68%,rgba(214,176,98,.26) 0 6%,transparent 7%),
             radial-gradient(circle at 67% 31%,rgba(214,176,98,.24) 0 5%,transparent 6%)}

@keyframes zgf-swing{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}
@keyframes zgf-glow{from{opacity:.6}to{opacity:1}}

/* 电脑宽度(非播放页):月亮挂进顶栏右侧留白里,不压「投稿」按钮 */
@media (min-width:701px){
  html.zgf-deco:not(.zgf-play) .zgf-moon{
    --d:clamp(22px,calc(5vw - 16px),44px);top:50%;margin-top:calc(var(--d) / -2);right:calc((5vw - var(--d)) / 2)}
  html.zgf-play .zgf-lantern{--w:18px;--h:15px;--s:3px}
  html.zgf-play .zgf-l2{left:36px;--s:4px}
  html.zgf-play .zgf-l3{right:42px}
  html.zgf-play .zgf-moon{--d:22px;top:calc(100% + 4px)}
}
/* 宽屏(首页/学习页两侧有留白时):灯笼放大、垂进左右留白 */
@media (min-width:1200px){
  html.zgf-deco:not(.zgf-play):not(.wide) .zgf-lantern{--w:26px;--h:22px;--s:18px}
  html.zgf-deco:not(.zgf-play):not(.wide) .zgf-l1{left:44px}
  html.zgf-deco:not(.zgf-play):not(.wide) .zgf-l2{left:92px;--s:40px}
  html.zgf-deco:not(.zgf-play):not(.wide) .zgf-l3{right:92px;--s:28px}
}
@media (max-width:700px){.zgf-ribbon{font-size:12px;letter-spacing:.5px;padding:0 54px}}
@media (max-width:359px){.zgf-l2,.zgf-l3{display:none}.zgf-ribbon{padding:0 30px 0 26px}}
@media (prefers-reduced-motion:reduce){.zgf-lantern,.zgf-moon::before{animation:none}}
@media print{.zgf-ribbon,.zgf-layer{display:none}html.zgf-deco #topnav{margin-bottom:0}}