/* ============================================================
   moon.css — 中秋主题测试主页（index-moon.php）专用样式  v2（性能优化版）
   只在本页加载，不影响现主页 index.php。
   性能原则（和主页优化同一套思路）：
     · 背景图完全静止（不再对全屏 SVG 做 scale 动画 = 不再逐帧重栅格化）
     · 全屏光晕只动 opacity（合成器动画），不动 scale
     · 月亮脉动改成小元素上的短动画，不再用 filter 逐帧重绘
     · 卡片 contain: paint，和高层动画互不影响
     · 粒子（孔明灯/桂花/金粉/月饼）都加了更小的阴影 + 数量上限
     · body.mn-lite = 省电模式（慢机器自动开启），砍效果不砍功能
   ============================================================ */

/* ============================================================
   中秋特效的显示开关
   —— 主页 index.php 也会加载本文件，但这些图层只在「中秋主题」下出现；
      主题切换后无需刷新（bar.php 切换配色会派发 tc-theme-change，moon.js 会重载一次）
   —— body.moon = index-moon.php 测试页，那里永远显示
   ============================================================ */
html[data-tc-theme="midautumn"] body {
    --mn-ink: #e7eefc; --mn-muted: #93a3c6;
    --mn-gold: #ffd98a; --mn-gold-2: #f0b35a; --mn-line: rgba(255, 214, 150, .20);
    --mn-card: rgba(12, 20, 42, .55); --mn-card-hover: rgba(18, 29, 56, .70);
}
html:not([data-tc-theme="midautumn"]) body:not(.moon) .moon-stage,
html:not([data-tc-theme="midautumn"]) body:not(.moon) .fx-field,
html:not([data-tc-theme="midautumn"]) body:not(.moon) .mn-fest,
html:not([data-tc-theme="midautumn"]) body:not(.moon) .mn-dock,
html:not([data-tc-theme="midautumn"]) body:not(.moon) .mn-game,
html:not([data-tc-theme="midautumn"]) body:not(.moon) .mn-hud,
html:not([data-tc-theme="midautumn"]) body:not(.moon) .mn-mask,
html:not([data-tc-theme="midautumn"]) body:not(.moon) .mn-toast,
html:not([data-tc-theme="midautumn"]) body:not(.moon) .mn-tag { display: none !important; }
/* 页脚的中秋标签 */
.mn-tag {
    display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 11px;
    color: #f0c98a; border: 1px solid rgba(255, 214, 150, .28); background: rgba(255, 190, 110, .08);
}

body.moon {
    --mn-ink: #e7eefc;
    --mn-muted: #93a3c6;
    --mn-gold: #ffd98a;
    --mn-gold-2: #f0b35a;
    --mn-line: rgba(255, 214, 150, .20);
    --mn-card: rgba(12, 20, 42, .55);
    --mn-card-hover: rgba(18, 29, 56, .70);
    --tc-card-bg: rgba(12, 20, 42, .55);
    --tc-card-bg-hover: rgba(18, 29, 56, .70);
    --tc-card-blur: none;
    background: #05081a !important;
    color: var(--mn-ink) !important;
}

/* ================= 背景舞台 ================= */
.moon-stage {
    position: fixed; inset: 0; z-index: 0;
    overflow: hidden; pointer-events: none;
    background: linear-gradient(180deg, #05081a 0%, #0a1330 34%, #132247 62%, #1d2c54 80%, #3a2f52 100%);
}
.moon-bgimg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: .96;
    /* 静止：全屏 SVG 不做缩放动画（逐帧重栅格化是掉帧大户） */
}
#moonStars { position: absolute; inset: 0; width: 100%; height: 100%; }
.moon-vignette {
    position: absolute; inset: 0;
    background: radial-gradient(125% 105% at 50% 38%, rgba(0,0,0,0) 42%, rgba(3,6,18,.58) 100%);
}

/* ================= 月亮 + 玉兔 ================= */
.moon-orb {
    position: absolute; left: 78%; top: 21%;
    width: clamp(120px, 17vmin, 245px); aspect-ratio: 1 / 1;
    transform: translate3d(calc(-50% + var(--mnpx, 0px)), calc(-50% + var(--mnpy, 0px)), 0);
    transition: transform .35s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;      /* 提升为独立层：鼠标视差走合成器，不再每帧重画月亮阴影 */
}
.moon-halo {
    position: absolute; left: 50%; top: 50%; width: 250%; aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 226, 150, .30) 0%, rgba(255, 200, 110, .13) 34%, rgba(255, 190, 100, 0) 68%);
    animation: mnHalo 7s ease-in-out infinite;   /* 只动 opacity：合成器动画，几乎零成本 */
    will-change: opacity;
}
@keyframes mnHalo { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }
.moon-disc {
    position: absolute; inset: 0; border-radius: 50%;
    background: radial-gradient(circle at 38% 33%, #fffdf3 0%, #fff0ca 30%, #ffdd97 58%, #f4bd66 80%, #e0a04a 100%);
    box-shadow:
        0 0 26px 6px rgba(255, 216, 134, .42),
        0 0 70px 26px rgba(255, 190, 110, .18),
        inset -10px -12px 30px rgba(176, 116, 40, .30);
}
.moon-disc.pop { animation: mnDiscPop .6s ease-out; }
@keyframes mnDiscPop { 0% { transform: scale(1); } 38% { transform: scale(1.075); } 100% { transform: scale(1); } }
.moon-mare {
    position: absolute; inset: 0; border-radius: 50%; mix-blend-mode: multiply;
    background:
        radial-gradient(circle at 66% 30%, rgba(196, 142, 64, .30) 0 9%, transparent 10%),
        radial-gradient(circle at 34% 62%, rgba(196, 142, 64, .24) 0 12%, transparent 13%),
        radial-gradient(circle at 56% 71%, rgba(196, 142, 64, .18) 0 7%, transparent 8%),
        radial-gradient(circle at 44% 27%, rgba(196, 142, 64, .16) 0 6%, transparent 7%);
}
.moon-rabbit { position: absolute; left: 4%; bottom: 2%; width: 36%; }
.moon-rabbit.hop { animation: mnHop .55s cubic-bezier(.3, .7, .4, 1); }
@keyframes mnHop {
    0%   { transform: translateY(0) scaleY(1); }
    35%  { transform: translateY(-58%) scaleY(1.08) rotate(-6deg); }
    70%  { transform: translateY(-6%) scaleY(.94) rotate(4deg); }
    100% { transform: translateY(0) scaleY(1); }
}

/* ================= 特效层（在卡片之上，不拦截点击） ================= */
.fx-field { position: fixed; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }

.lantern { position: absolute; bottom: -20vh; will-change: transform, opacity; animation: mnRise var(--dur, 11s) linear forwards; }
@keyframes mnRise {
    0%   { transform: translateY(0); opacity: 0; }
    8%   { opacity: 1; }
    82%  { opacity: 1; }
    100% { transform: translateY(calc(-114vh - 180px)); opacity: 0; }
}
.lantern-i { display: block; animation: mnSway var(--sway, 3.6s) ease-in-out infinite alternate; }
@keyframes mnSway {
    from { transform: translateX(calc(var(--amp, 18px) * -1)) rotate(-4deg); }
    to   { transform: translateX(var(--amp, 18px)) rotate(4deg); }
}
.lantern-body {
    position: relative; width: var(--sz, 26px); height: calc(var(--sz, 26px) * 1.32);
    border-radius: 50% 50% 44% 44% / 62% 62% 38% 38%;
    background: radial-gradient(circle at 50% 28%, #fff3cd, #ffb45e 55%, #ff7a3d);
    box-shadow: 0 0 12px 4px rgba(255, 160, 70, .5), 0 0 30px 10px rgba(255, 140, 60, .16);
}
.lantern-body::before {
    content: ''; position: absolute; left: 50%; top: -4px; width: 42%; height: 5px;
    border-radius: 3px; background: #8a4a1f; transform: translateX(-50%);
}
.lantern-body::after {
    content: ''; position: absolute; left: 50%; bottom: -8px; width: 2px; height: 9px;
    background: rgba(255, 205, 130, .95); transform: translateX(-50%);
}
.lantern-wish {
    position: absolute; left: 50%; bottom: 120%; white-space: nowrap;
    font-size: 11.5px; letter-spacing: 1px; color: #ffe9b8;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .8);
    transform: translateX(-50%); opacity: 0;
    animation: mnWish var(--dur, 11s) ease forwards;
}
@keyframes mnWish { 0%, 12% { opacity: 0; } 24%, 68% { opacity: .95; } 100% { opacity: 0; } }

.petal { position: absolute; top: -7vh; animation: mnFall var(--dur, 9s) linear forwards; }
.petal i {
    display: block; width: 8px; height: 8px; border-radius: 50% 0 50% 0;
    background: radial-gradient(circle at 35% 35%, #fff2c8, #ffb75e);
    animation: mnSpin 3.2s linear infinite;
}
@keyframes mnFall { 0% { transform: translateY(0); opacity: .95; } 100% { transform: translateY(114vh); opacity: .12; } }
@keyframes mnSpin { to { transform: rotate(360deg); } }

.spark {
    position: absolute; width: 6px; height: 6px; border-radius: 50%;
    background: radial-gradient(circle, #fff4cf 20%, #ffbe63 60%, rgba(255, 170, 80, 0));
    pointer-events: none; animation: mnSpark .95s ease-out forwards;
}
@keyframes mnSpark {
    0%   { transform: translate(-50%, -50%) scale(.5); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.2); opacity: 0; }
}

/* ================= 玉兔指针（自定义 cursor） ================= */
/* 优先 SVG（清晰、可缩放），不支持 SVG 光标的环境回落到已校验的 32×32 PNG，再不行才用系统指针。
   想换回系统指针：点互动坞里的「🐰 玉兔指针」，或给 body 加 .mn-nocursor（存 localStorage mn_cursor=0）。 */
body.moon {
    cursor: url('/img/rabbit-cursor.svg?v=20260924d') 4 4,
            url('/img/rabbit-cursor.png?v=20260924d') 4 4,
            auto;
}
body.moon :is(a, button, label, select, summary,
              .brand, .go, .bico, .logout, .avatar-box, .av-pop-link,
              .mn-btn, .mn-x, .mc, .mi, .act-item, .ck-btn, .say-refresh,
              .m-pick-btn, .m-volico, .tc-close) {
    cursor: url('/img/rabbit-cursor-hover.svg?v=20260924d') 4 4,
            url('/img/rabbit-cursor.png?v=20260924d') 4 4,
            pointer;
}
body.moon :is(input, textarea) { cursor: text; }

/* 关掉玉兔指针（恢复系统指针） */
body.mn-nocursor, body.mn-nocursor * { cursor: default !important; }
body.mn-nocursor :is(a, button, label, select, summary, .mn-btn, .mc, .mi, .act-item, .ck-btn, .m-volico, .tc-close) { cursor: pointer !important; }
body.mn-nocursor :is(input, textarea) { cursor: text !important; }

/* ================= 标题（中秋） ================= */
.mn-fest {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 13px; letter-spacing: 4px; color: #ffe0a3;
    padding: 5px 16px; border-radius: 999px;
    border: 1px solid rgba(255, 214, 150, .28);
    background: rgba(255, 190, 110, .10);
    box-shadow: 0 6px 20px rgba(255, 170, 90, .16);
    text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
    margin-bottom: 4px; flex-shrink: 0;
}
.mn-fest .lb { font-size: 14px; animation: mnLanternSwing 3.4s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes mnLanternSwing { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
body.moon .title .en {
    color: #fff3d2 !important;
    text-shadow: 0 0 34px rgba(255, 205, 120, .40), 0 6px 24px rgba(0, 0, 0, .55) !important;
}
body.moon .title .en b {
    background: linear-gradient(90deg, #ffeaa8, #ff9a52 62%, #ff7ab6) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
body.moon .title .cn { color: #cbd6ee !important; letter-spacing: 8px !important; }
body.moon .title .slogan { color: var(--mn-muted) !important; }

/* ================= 卡片：夜色 + 金边 ================= */
body.moon .w {
    background: var(--mn-card) !important;
    border: 1px solid var(--mn-line) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 226, 170, .07) !important;
    backdrop-filter: none !important;
    contain: paint;                       /* 卡片自成绘制层，和高层动画互不触发重绘 */
}
body.moon .w:hover {
    background: var(--mn-card-hover) !important;
    border-color: rgba(255, 214, 150, .38) !important;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .52), 0 0 0 1px rgba(255, 214, 150, .12) !important;
}
body.moon .w > h3 { color: var(--mn-gold) !important; }
body.moon .w > h3 i {
    background: linear-gradient(135deg, #ffe1a3, #ff9a52) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
body.moon .clock { color: #fff0c4 !important; text-shadow: 0 0 26px rgba(255, 214, 130, .40), 0 4px 18px rgba(0, 0, 0, .5) !important; }
body.moon .cdate,
body.moon .words-src,
body.moon .ck-label,
body.moon .srv-sub,
body.moon .cap,
body.moon .m-artist,
body.moon .act-m,
body.moon .disk .lbl,
body.moon .net .item .k,
body.moon .ft-line,
body.moon .foot { color: var(--mn-muted) !important; }
body.moon .foot b { color: #cbb98f !important; }
body.moon .ck-points,
body.moon .gauge .inner,
body.moon .net .item .v,
body.moon .m-title,
body.moon .act-t { color: #ffe6b0 !important; }
body.moon .words-text { color: #dce7fb !important; }
body.moon .words-text::before,
body.moon .words-text::after { color: rgba(255, 214, 150, .55) !important; }
body.moon .net .item { background: rgba(255, 214, 150, .09) !important; }
body.moon .disk .bar { background: rgba(255, 214, 150, .14) !important; }
body.moon .disk .bar > i,
body.moon .m-track i { background: linear-gradient(90deg, #ffe0a0, #ff9a52) !important; }
body.moon .m-track { background: rgba(255, 214, 150, .16) !important; }
body.moon .gauge .ring-bg { stroke: rgba(255, 214, 150, .16) !important; }
body.moon .fortune { border-top-color: rgba(255, 214, 150, .22) !important; }
body.moon .ck-btn {
    background: linear-gradient(135deg, #ffd98a, #ff9a52) !important;
    color: #40260a !important; font-weight: bold;
    box-shadow: 0 6px 18px rgba(255, 160, 80, .32) !important;
}
body.moon .ck-btn:hover { filter: brightness(1.08); }
body.moon .ck-btn:disabled { background: rgba(255, 214, 150, .16) !important; color: #8d8ba6 !important; box-shadow: none !important; }
body.moon .m-btn { background: rgba(255, 214, 150, .13) !important; color: #ffd98a !important; }
body.moon .m-btn:hover { background: rgba(255, 214, 150, .26) !important; }
body.moon .m-btn.m-play {
    background: linear-gradient(135deg, #ffd98a, #ff9a52) !important;
    color: #40260a !important; box-shadow: 0 6px 16px rgba(255, 160, 80, .35) !important;
}
body.moon .m-cover { border-color: rgba(255, 226, 170, .7) !important; background: linear-gradient(135deg, #ffc978, #ff8f5a) !important; }
body.moon .m-volico, body.moon .say-refresh, body.moon .m-pick-btn { color: #ffd98a !important; }
body.moon .m-volico:hover, body.moon .say-refresh:hover { color: #fff3d2 !important; background: rgba(255, 214, 150, .14) !important; }
body.moon .m-list .mi { color: #a9b6d4 !important; }
body.moon .m-list .mi:hover { background: rgba(255, 214, 150, .10) !important; }
body.moon .m-list .mi.cur { color: #ffd98a !important; background: rgba(255, 214, 150, .14) !important; }
body.moon .act-item:hover { background: rgba(255, 214, 150, .10) !important; }
body.moon .act-item .ai,
body.moon .act-item.post .ai,
body.moon .act-item.announce .ai,
body.moon .act-item.login .ai { background: linear-gradient(135deg, #ffd98a, #ff8f5a) !important; color: #40260a !important; }
body.moon .act-list::-webkit-scrollbar-thumb { background: rgba(255, 214, 150, .32) !important; }
body.moon .act-empty { color: #6f7d9c !important; }
body.moon .ck-streak { color: #ffb37a !important; }

/* 顶栏：夜色胶囊 + 金调 */
body.moon .capsule {
    background: rgba(10, 17, 36, .82) !important;
    border: 1px solid rgba(255, 214, 150, .16) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5) !important;
}
body.moon .capsule::before { opacity: .55 !important; }
body.moon .brand .en { color: #ffe9b8 !important; }
body.moon .brand .cn,
body.moon .go,
body.moon .uname,
body.moon .tcstat { color: #a9b6d4 !important; }
body.moon .go:hover { background: rgba(255, 214, 150, .15) !important; color: #ffe9b8 !important; }
body.moon .go i, body.moon .bico i, body.moon .auth-links .login i {
    background: linear-gradient(135deg, #ffe1a3, #ff9a52) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
body.moon .bico, body.moon .logout {
    background: rgba(255, 214, 150, .10) !important;
    color: #f0c98a !important;
}
body.moon .bico:hover, body.moon .logout:hover { background: rgba(255, 160, 90, .22) !important; color: #ffe9b8 !important; }
body.moon .nav-sep { background: rgba(255, 214, 150, .22) !important; }
body.moon .auth-links .login { color: #ffe9b8 !important; background: rgba(255, 214, 150, .14) !important; }
body.moon .auth-links .signup {
    background: linear-gradient(135deg, #ffd98a, #ff9a52) !important; color: #40260a !important; font-weight: bold;
}
body.moon .tc-panel { background: rgba(12, 19, 38, .97) !important; border-color: rgba(255, 214, 150, .20) !important; }
body.moon .tc-title { color: #ffe9b8 !important; border-bottom-color: rgba(255, 214, 150, .22) !important; }
body.moon .tc-title i { background: linear-gradient(135deg, #ffe1a3, #ff9a52) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; }
body.moon .av-pop { background: rgba(12, 19, 38, .98) !important; }
body.moon .tc-sw input:checked + i { background: linear-gradient(135deg, #ffd98a, #ff9a52) !important; }
body.moon .av-dot { border-color: #0c1326 !important; }

/* ================= 互动坞 ================= */
.mn-dock {
    position: fixed; left: 16px; bottom: 36px; z-index: 70;   /* 抬高一点，不压住页脚 */
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    max-width: calc(100vw - 32px);
}
.mn-btn {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid rgba(255, 214, 150, .26);
    background: rgba(12, 20, 42, .74);
    color: #ffe6b4; border-radius: 999px; padding: 8px 14px;
    font-size: 12.5px; letter-spacing: 1px; cursor: pointer;
    font-family: hy5, 'Microsoft YaHei', sans-serif;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease;
    -webkit-tap-highlight-color: transparent;
}
.mn-btn:hover {
    background: rgba(255, 180, 90, .22); transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(255, 150, 70, .32);
    border-color: rgba(255, 214, 150, .58);
}
.mn-btn:active { transform: translateY(0) scale(.97); }
.mn-btn.on { border-color: rgba(255, 214, 150, .7); background: rgba(255, 180, 90, .26); }
.mn-btn .em { font-size: 15px; line-height: 1; }

.mn-wish {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(12, 20, 42, .74); border: 1px solid rgba(255, 214, 150, .26);
    border-radius: 999px; padding: 4px 5px 4px 14px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
}
.mn-wish input {
    background: transparent; border: 0; outline: none; color: #ffe6b4; width: 148px;
    font-size: 12.5px; letter-spacing: 1px; font-family: hy5, 'Microsoft YaHei', sans-serif;
}
.mn-wish input::placeholder { color: #8d97b4; }
.mn-wish button {
    border: 0; cursor: pointer; border-radius: 999px; padding: 6px 13px;
    background: linear-gradient(135deg, #ffd98a, #ff9a52); color: #40260a;
    font-size: 12px; font-weight: bold; letter-spacing: 1px;
    font-family: hy5, 'Microsoft YaHei', sans-serif;
    transition: filter .2s ease;
}
.mn-wish button:hover { filter: brightness(1.08); }

/* ================= 接月饼小游戏 ================= */
.mn-game { position: fixed; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; display: none; }
.mn-game.on { display: block; pointer-events: auto; cursor: crosshair; }   /* 游戏中铺满全屏当“盾”：接住所有误点 */

/* 游戏中：其他入口一律禁用，避免误触（只留“结束”和月饼可点） */
body.mn-playing .mn-dock .mn-btn,
body.mn-playing .mn-dock .mn-wish { opacity: .28; pointer-events: none; }
body.mn-playing .mn-dock .mn-btn[data-act="cake"] { opacity: 1; pointer-events: auto; }
body.mn-playing #barWrap { opacity: .5; pointer-events: none; }
.mc {
    position: absolute; top: -12vh; line-height: 1; cursor: pointer;
    pointer-events: auto; will-change: transform;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .45));
    animation: mnCakeFall var(--dur, 3.2s) linear forwards;
}
@keyframes mnCakeFall {
    from { transform: translateY(0) rotate(0deg); }
    to   { transform: translateY(122vh) rotate(320deg); }
}
.mc.hit { animation: none; transition: transform .24s ease, opacity .24s ease; transform: scale(1.7); opacity: 0; }
.mn-hud {
    position: fixed; left: 50%; top: 74px; transform: translateX(-50%);
    z-index: 210; display: none; align-items: center; gap: 14px;
    padding: 9px 20px; border-radius: 999px;
    background: rgba(12, 19, 38, .95);
    border: 1px solid rgba(255, 214, 150, .30);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .55);
    color: #ffe9b8; font-size: 13px; letter-spacing: 1px;
}
.mn-hud.on { display: flex; }
.mn-hud b { color: #ffd98a; font-size: 16px; }
.mn-hud button {
    border: 0; cursor: pointer; border-radius: 999px; padding: 5px 13px;
    background: rgba(255, 214, 150, .16); color: #ffe6b4; font-size: 12px;
    font-family: hy5, 'Microsoft YaHei', sans-serif; letter-spacing: 1px;
}
.mn-hud button:hover { background: rgba(255, 214, 150, .3); }

/* ================= 灯谜弹窗 ================= */
.mn-mask {
    position: fixed; inset: 0; z-index: 200; display: none;
    align-items: center; justify-content: center; padding: 20px;
    background: rgba(4, 8, 20, .72);
}
.mn-mask.show { display: flex; animation: mnFade .22s ease; }
@keyframes mnFade { from { opacity: 0; } to { opacity: 1; } }
.mn-card {
    position: relative; width: min(470px, 93vw); text-align: center;
    padding: 24px 24px 18px; border-radius: 22px;
    background: linear-gradient(165deg, rgba(34, 25, 48, .97), rgba(14, 19, 40, .98));
    border: 1px solid rgba(255, 214, 150, .30);
    box-shadow: 0 26px 64px rgba(0, 0, 0, .62);
    color: #f2e9ff;
    animation: mnPop .3s cubic-bezier(.2, .9, .3, 1.28);
}
@keyframes mnPop { from { transform: scale(.9) translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.mn-card .mn-ico { font-size: 30px; line-height: 1; margin-bottom: 4px; }
.mn-card h3 { font-size: 16px; font-weight: normal; letter-spacing: 4px; color: #ffe9b8; margin-bottom: 14px; }
.mn-q {
    font-size: 15px; line-height: 1.75; color: #f0e7ff; letter-spacing: 1px;
    padding: 16px 14px; border-radius: 14px; margin-bottom: 12px;
    background: rgba(255, 214, 150, .07);
    border: 1px dashed rgba(255, 214, 150, .28);
    min-height: 76px; display: flex; align-items: center; justify-content: center;
}
.mn-a {
    font-size: 14px; letter-spacing: 2px; color: #ffd98a; min-height: 22px;
    opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease;
}
.mn-a.show { opacity: 1; transform: none; }
.mn-btns { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
.mn-btns button {
    border: 0; cursor: pointer; border-radius: 12px; padding: 10px 20px;
    font-size: 13px; letter-spacing: 2px; font-family: hy5, 'Microsoft YaHei', sans-serif;
    transition: transform .2s ease, filter .2s ease, background .2s ease;
    background: rgba(255, 214, 150, .13); color: #ffe6b4;
}
.mn-btns button:hover { background: rgba(255, 214, 150, .24); transform: translateY(-2px); }
.mn-btns button.primary {
    background: linear-gradient(135deg, #ffd98a, #ff9a52); color: #40260a; font-weight: bold;
    box-shadow: 0 8px 22px rgba(255, 160, 80, .34);
}
.mn-btns button.primary:hover { filter: brightness(1.08); }
.mn-x {
    position: absolute; right: 12px; top: 12px; width: 30px; height: 30px;
    border: 0; border-radius: 50%; cursor: pointer; font-size: 17px; line-height: 1;
    background: rgba(255, 214, 150, .12); color: #d9c39a;
}
.mn-x:hover { background: rgba(255, 150, 90, .26); color: #fff; }

/* ================= 提示 ================= */
.mn-toast {
    position: fixed; left: 50%; top: 132px; transform: translateX(-50%);   /* 让开小游戏计分条 */
    z-index: 9999; padding: 10px 22px; border-radius: 14px;
    font-size: 13.5px; letter-spacing: 1px; color: #ffe9b8;
    background: rgba(14, 20, 40, .95);
    border: 1px solid rgba(255, 214, 150, .30);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .55);
    transition: opacity .4s ease, transform .4s ease;
    max-width: 86vw; text-align: center;
}
.mn-toast.out { opacity: 0; transform: translateX(-50%) translateY(-10px); }

/* ================= 省电模式（慢机器自动开 / 也可手动） ================= */
body.mn-lite .moon-halo { animation: none !important; opacity: .9 !important; }
body.mn-lite .moon-disc { box-shadow: 0 0 18px 4px rgba(255, 216, 134, .38) !important; }
body.mn-lite .lantern-body { box-shadow: 0 0 8px 2px rgba(255, 160, 70, .45) !important; }
body.mn-lite .petal i { box-shadow: none !important; }
body.mn-lite .w,
body.mn-lite .w:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, .40) !important; }
body.mn-lite .mn-fest { box-shadow: none !important; }
body.mn-lite .lantern-wish { text-shadow: 0 1px 4px rgba(0, 0, 0, .9) !important; }
body.mn-lite .moon-bgimg { opacity: .92 !important; }

/* ================= 响应式 ================= */
@media (max-width: 860px) {
    .moon-orb { left: 50%; top: 12%; width: clamp(110px, 30vw, 170px); }
    .mn-fest { font-size: 12px; letter-spacing: 2px; }
    .mn-dock { left: 10px; right: 10px; bottom: 10px; gap: 6px; }
    .mn-btn { padding: 7px 11px; font-size: 12px; }
    .mn-btn .tx { display: none; }          /* 手机端只留图标，一行放得下 */
    .mn-wish { display: none; }             /* 手机端不显示许愿输入框，避免浮动工具栏占两行 */
    .mn-hud { top: 62px; font-size: 12px; padding: 7px 14px; }
    #mnCursorBtn { display: none; }         /* 触屏没有鼠标，玉兔指针开关没意义 */
}
@media (min-width: 861px) and (max-height: 700px) {
    .moon-orb { width: clamp(110px, 15vmin, 190px); }
}