/* ============================================================ 数学森林 · 共享内核 gz-core v1 —— 自包含：主题切换 / 通用思维教练 / 难度档位 / 跨设备进度备份 由 gz-core.js 自动初始化；仅依赖标准 localStorage，不依赖任何机器内部变量。 ============================================================ */ :root{ --gz-c1:#f2a65a; /* 蜂蜜橙：主按钮 */ --gz-c2:#ffd27a; /* 阳光黄：次强调 */ --gz-c3:#97C459; /* 薄荷绿：正确/成长 */ --gz-c4:#e8863a; /* 珊瑚橙：强调 */ --gz-ink:#3a2c1a; /* 树皮棕：正文 */ --gz-panel:#fffdf4;/* 奶油面板 */ --gz-line:#e2d5b8; /* 描边 */ --gz-accent:#3B6D11;/* 森林绿：强调 */ --gz-soft:#fdf6e0; /* 浅底 */ } /* 远山学园（成熟皮）：给 5–6 年级更稳、更内敛的观感 */ html[data-theme="yuan"]{ --gz-c1:#6c7bd1; --gz-c2:#9fb0e8; --gz-c3:#4fb0a5; --gz-c4:#5a6bb0; --gz-ink:#23304a; --gz-panel:#f5f7fc; --gz-line:#c9d3e8; --gz-accent:#39508f; --gz-soft:#eef2fb; } /* 成熟皮：不再用全页滤镜抽饱和（会把暖色背景抽成灰），改为冷色调配色 + 专属遮罩 */ html[data-theme="yuan"] body::before{ background:linear-gradient(180deg,rgba(16,28,58,.42),rgba(16,28,58,.24) 30%,rgba(16,28,58,.5)) !important; } html[data-theme="yuan"] .gz-hero{ background:linear-gradient(180deg,rgba(14,26,56,.9),rgba(14,26,56,.58)); color:#dbe4ff; box-shadow:0 8px 24px rgba(0,0,0,.35); } html[data-theme="yuan"] .gz-back{ color:#12204a; background:linear-gradient(180deg,#c9d6ff,#8fa5e8); box-shadow:0 3px 0 #5a6db8; } html[data-theme="yuan"] .gz-foot{ background:rgba(14,26,56,.85); color:#cdd6ee; } /* —— 森林晨光 meadow（AI 新绘草地背景） —— */ html[data-theme="meadow"]{ --gz-c1:#5fae3f; --gz-c2:#a8d977; --gz-c3:#4fb0a5; --gz-c4:#e8863a; --gz-ink:#2c3a1a; --gz-panel:#fbfff2; --gz-line:#cfe3ae; --gz-accent:#2f7a1e; --gz-soft:#eef7dd; } html[data-theme="meadow"] body::before{ background:linear-gradient(180deg,rgba(20,44,10,.42),rgba(20,44,10,.22) 30%,rgba(20,44,10,.5)) !important; } html[data-theme="meadow"] .gz-hero{ background:linear-gradient(180deg,rgba(24,54,12,.88),rgba(24,54,12,.55)); color:#e8ffd9; } html[data-theme="meadow"] .gz-foot{ background:rgba(24,54,12,.85); color:#dcefca; } html[data-theme="meadow"] .gz-back{ color:#173a08; background:linear-gradient(180deg,#c8ec9a,#8fd165); box-shadow:0 3px 0 #5c9a35; } html[data-theme="meadow"] .gz-cta, html[data-theme="meadow"] .qbtn, html[data-theme="meadow"] .gz-b, html[data-theme="meadow"] #gzCoreBar .gzbtn{ color:#1d3a08 } /* —— 星空远山 aurora（AI 新绘夜色背景，5–6 年级） —— */ html[data-theme="aurora"]{ --gz-c1:#5a6bb0; --gz-c2:#9fb0e8; --gz-c3:#4fb0a5; --gz-c4:#7a5ac0; --gz-ink:#23304a; --gz-panel:#f2f4fc; --gz-line:#c9d3e8; --gz-accent:#3d55a8; --gz-soft:#e9edfb; } html[data-theme="aurora"] body::before{ background:linear-gradient(180deg,rgba(4,8,22,.5),rgba(4,8,22,.3) 30%,rgba(4,8,22,.62)) !important; } html[data-theme="aurora"] .gz-hero{ background:linear-gradient(180deg,rgba(6,12,32,.92),rgba(6,12,32,.6)); color:#d5ddff; } html[data-theme="aurora"] .gz-foot{ background:rgba(6,12,32,.88); color:#c5cff2; } html[data-theme="aurora"] .gz-back{ color:#0e1a40; background:linear-gradient(180deg,#b9c6f5,#7f92dd); box-shadow:0 3px 0 #4c5da8; } html[data-theme="aurora"] .gz-cta, html[data-theme="aurora"] .qbtn, html[data-theme="aurora"] .gz-b, html[data-theme="aurora"] #gzCoreBar .gzbtn{ color:#10204a } /* —— 森林小镇 town（AI 微缩世界背景） —— */ html[data-theme="town"]{ --gz-c1:#e8a04c; --gz-c2:#ffd28a; --gz-c3:#4fb0a5; --gz-c4:#d9702e; --gz-ink:#3a2c1a; --gz-panel:#fffdf6; --gz-line:#ded0b0; --gz-accent:#6b8f2f; --gz-soft:#faf3e0; } html[data-theme="town"] body::before{ background:linear-gradient(180deg,rgba(52,38,12,.38),rgba(52,38,12,.2) 30%,rgba(52,38,12,.46)) !important; } html[data-theme="town"] .gz-hero{ background:linear-gradient(180deg,rgba(62,44,14,.9),rgba(62,44,14,.55)); color:#ffecc9; } html[data-theme="town"] .gz-foot{ background:rgba(62,44,14,.86); color:#ffe6bd; } html[data-theme="town"] .gz-back{ color:#4a3005; background:linear-gradient(180deg,#ffe3a8,#f0b968); box-shadow:0 3px 0 #c08430; } html[data-theme="town"] .gz-cta, html[data-theme="town"] .qbtn, html[data-theme="town"] .gz-b, html[data-theme="town"] #gzCoreBar .gzbtn{ color:#4a3005 } /* —— 新皮肤也覆盖点菜机自有横幅 —— */ html[data-theme="yuan"] .rv-hero, html[data-theme="aurora"] .rv-hero{ background:linear-gradient(180deg,rgba(10,20,48,.92),rgba(10,20,48,.6)); color:#d5ddff; } html[data-theme="meadow"] .rv-hero{ background:linear-gradient(180deg,rgba(24,54,12,.9),rgba(24,54,12,.55)); color:#e8ffd9; } /* —— 浮动工具条（兜底：未成功整合进页头时仍显示在右侧） —— */ #gzCoreBar{ position:fixed; right:12px; top:86px; bottom:auto; z-index:1500; display:flex; flex-direction:column; gap:8px; align-items:flex-end; font-family:inherit; max-height:calc(calc(var(--gz-vh,1vh)*100) - 110px); overflow-y:auto; overflow-x:visible } #gzCoreBar .gzbtn{ display:inline-flex; align-items:center; gap:6px; border:0; cursor:pointer; font-family:inherit; background:linear-gradient(180deg,var(--gz-c2),var(--gz-c1)); color:#5a3200; font-weight:900; font-size:13px; border-radius:999px; padding:9px 14px; box-shadow:0 3px 0 rgba(120,60,10,.32); transition:transform .15s } #gzCoreBar .gzbtn:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(120,60,10,.32) } #gzCoreBar .gzbtn .em{ font-size:16px; line-height:1 } #gzCoreBar .gzbtn .l{ white-space:nowrap } html[data-theme="yuan"] #gzCoreBar .gzbtn{ color:#10204a; box-shadow:0 3px 10px rgba(30,40,80,.22) } /* 小屏兜底：整体缩小、更贴近右侧 */ @media (max-width:480px){ #gzCoreBar{ right:8px; top:82px; gap:6px; max-height:calc(calc(var(--gz-vh,1vh)*100) - 100px) } #gzCoreBar .gzbtn{ padding:7px 10px; font-size:11.5px } #gzCoreBar .gzbtn .em{ font-size:14px } } /* —— 难度选择器统一为「森林寻宝机」式三档胶囊：🌱轻松 / 🌟标准 / 🔥挑战 —— */ /* 机器自带 #gzDiffBar 会被覆盖成胶囊；无难度条的机器由 gz-core.js 自动补建 .gz-diff-seg */ #gzDiffBar, .gz-diff-seg{ position:fixed !important; right:12px !important; top:260px !important; left:auto !important; bottom:auto !important; transform:none !important; display:inline-flex !important; flex-direction:row !important; gap:0 !important; z-index:1490 !important; width:auto !important; min-width:auto !important; background:#fff !important; border:2px solid var(--gz-c1,#f2a65a) !important; border-radius:14px !important; padding:0 !important; overflow:hidden !important; box-shadow:0 3px 10px rgba(40,30,5,.15) !important } #gzDiffBar button, .gz-diff-seg button{ display:inline-flex !important; align-items:center !important; gap:4px !important; width:auto !important; min-width:34px !important; text-align:center !important; padding:7px 12px !important; font-size:12px !important; border-radius:0 !important; border:none !important; border-right:1px solid rgba(242,166,90,.25) !important; background:#fff !important; color:#5a3d1a !important; cursor:pointer !important; font-weight:800 !important; box-sizing:border-box !important } #gzDiffBar button:last-child, .gz-diff-seg button:last-child{ border-right:none !important } #gzDiffBar button.on, .gz-diff-seg button.on{ background:linear-gradient(180deg,#ffb26b,#e8621c) !important; color:#3a1c02 !important } #gzDiffBar button .d-emoji, .gz-diff-seg button .d-emoji{ font-size:13px } #gzDiffBar button .d-label, .gz-diff-seg button .d-label{ white-space:nowrap } #gzDiffBar.gz-auto button, .gz-diff-seg.gz-auto button{ opacity:.65; pointer-events:none } /* 机器自带连胜徽章 #gzStreak（兜底） */ #gzStreak{ position:fixed !important; right:12px !important; top:370px !important; left:auto !important; bottom:auto !important; z-index:1480 !important; background:#fff3dc !important; border:2px solid #ffd66b !important; border-radius:999px !important; padding:5px 10px !important; font-size:12px !important; font-weight:800 !important; color:#8a5a08 !important } #gzStreak.active{ background:linear-gradient(180deg,#ffd66b,#f2a65a) !important; color:#6b3d08 !important } @media (max-width:480px){ #gzDiffBar, .gz-diff-seg{ right:8px !important; top:250px !important } #gzDiffBar button, .gz-diff-seg button{ padding:6px 9px !important; font-size:11px !important } #gzStreak{ right:8px !important; top:350px !important } } /* ============ 统一页头：把徽章/连胜/难度/工具条全部收进 .hud / #gzTopBar ============ 机器页共用 .hud：返回 · 标题 · 星星 · [徽章] · [连胜] · [难度] · 工具按钮 · 全屏 */ /* 兜底顶栏（页面无 .hud 时使用） */ #gzTopBar{ position:sticky; top:0; z-index:1600; display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; padding:8px 12px; background:rgba(255,250,240,.96); border-bottom:3px solid var(--gz-line); backdrop-filter:blur(6px); font-family:inherit } #gzTopBar .backBtn, body.gzb-unified-header .hud .backBtn, body.gzb-unified-header #gzTopBar .backBtn{ flex:none; font-size:13px; font-weight:900; color:#6b3d08; text-decoration:none; padding:7px 13px; border-radius:999px; cursor:pointer; background:linear-gradient(180deg,#fff3dc,#ffe2b0); border:2px solid var(--gz-c1,#f2a65a); box-shadow:0 3px 8px rgba(60,30,5,.18); transition:transform .15s } #gzTopBar .backBtn:active, body.gzb-unified-header .hud .backBtn:active, body.gzb-unified-header #gzTopBar .backBtn:active{ transform:scale(.92) } #gzTopBar .tt{ flex:1 1 auto; min-width:120px } /* 成功整合后，所有核心元素都 static 并随 header flex 流动 */ body.gzb-unified-header #gzCoreBar, body.gzb-unified-header #gzDiffBar, body.gzb-unified-header #gzTypeBadge, body.gzb-unified-header #gzStreak{ position:static !important; right:auto !important; top:auto !important; bottom:auto !important; left:auto !important; transform:none !important; z-index:auto !important } /* 统一页头已改为 sticky 并在文档流内，机器页若仍保留 fixed 页头时代的 body padding-top 会多顶出一行空白，这里兜底清除 */ body.gzb-unified-header{ padding-top:0 !important } /* 页面自带页头元素重配色（2026-10-15）：不少机器页（线段图机器-焕新版等）的 hud 原本是深棕底 + 奶油色文字；统一页头把 hud 背景强制成米白后，这些奶油字就"米白底奶油字"几乎不可见。 这里按「森林寻宝机」同款米白风格给常见页面自带元素统一重配色，保证对比度。 */ body.gzb-unified-header .hud .logo, #gzTopBar .logo{ color:#6b3d08 !important; text-shadow:none !important } body.gzb-unified-header .hud .logo small, #gzTopBar .logo small{ color:#9a6b3a !important } body.gzb-unified-header .hud .tabs .tab{ background:#fff !important; border:1.5px solid #f2a65a !important; color:#4a2c08 !important; box-shadow:0 2px 5px rgba(60,30,5,.1); text-shadow:none !important } body.gzb-unified-header .hud .tabs .tab.on{ background:linear-gradient(180deg,#ffd66b,#f2a65a) !important; border-color:#f2a65a !important; color:#4a2c08 !important; font-weight:900 } body.gzb-unified-header .hud .tabs .tab.lock{ opacity:.5 } body.gzb-unified-header .hud .icnbtn{ background:linear-gradient(180deg,#fff3dc,#ffe2b0) !important; border:2px solid #f2a65a !important; color:#6b3d08 !important; box-shadow:0 2px 6px rgba(60,30,5,.15); text-shadow:none !important } /* 伪全屏兜底（全局全屏偏好开启时）：内容充满视口、页面级不出现滚动条； 真全屏 API 可用时（file:// 下 Chrome/Edge 支持）优先走原生全屏，这里只作降级兜底 */ html.gzb-kiosk, html.gzb-kiosk body{ height:100%; } html.gzb-kiosk body{ overflow:hidden; } html.gzb-kiosk .screen{ height:100%; overflow:auto; } /* 兜底修正（2026-10-15）：gz-core.js 在 apply 时探测页面是否有 .screen 滚动容器， 没有的页面（枢纽 index / portal 等本项目全部页面）若也锁 body overflow:hidden， 滚轮会彻底失效、第二屏内容看不到也点不到 —— 这里恢复默认文档流滚动。 真全屏下内容本就充满视口，滚动的只是文档本身，不影响 kiosk 视觉。 */ html.gzb-kiosk.gzb-noscreen body{ overflow-x:hidden; overflow-y:auto !important; } html.gzb-kiosk.gzb-noscreen, html.gzb-kiosk.gzb-noscreen body{ height:auto; } /* header 容器：允许必要换行，但第一行优先放满；外观与「森林寻宝机」页头完全一致 */ body.gzb-unified-header .hud, #gzTopBar{ display:flex !important; align-items:center !important; gap:6px 8px !important; flex-wrap:wrap !important; padding:9px 12px !important; background:rgba(255,250,240,.96) !important; border-bottom:3px solid #f2a65a !important; box-shadow:0 3px 12px rgba(150,90,20,.14) !important; backdrop-filter:blur(6px) !important; container-type:inline-size } /* 防挤压（2026-10-15）：unifyHeader 往页面自带 .hud 里追加徽章/连胜/工具条后空间变紧， flex 默认会先把页面自带元素（logo/题型 tab 等）压扁 → 文字叠成乱码。 这里禁止一切子项收缩：放不下就整体换行，绝不压扁。标题 .tt 例外（保持省略号）。 */ body.gzb-unified-header .hud > *, #gzTopBar > *{ flex-shrink:0 !important } body.gzb-unified-header .hud .tt, #gzTopBar .tt{ flex-shrink:1 !important } body.gzb-unified-header .hud .tt, #gzTopBar .tt{ flex:0 1 auto !important; min-width:0 !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; font-size:18px !important; font-weight:900 !important; color:#b3500f !important } body.gzb-unified-header .hud .tt small, #gzTopBar .tt small{ display:block !important; font-size:10px !important; font-weight:600 !important; color:#7a4a1a !important } /* 标题徽章：小胶囊，与森林寻宝机页头协调 */ body.gzb-unified-header #gzTypeBadge{ flex:none !important; padding:3px 9px !important; font-size:11px !important; font-weight:800 !important; border-width:1.5px !important; border-radius:999px !important; background:rgba(255,253,246,.95) !important; box-shadow:0 2px 6px rgba(60,30,5,.12) !important } /* 小火苗：小胶囊 */ body.gzb-unified-header #gzStreak{ flex:none !important; padding:3px 9px !important; font-size:12px !important; font-weight:800 !important; background:#fff3dc !important; border:2px solid #ffd66b !important; border-radius:999px !important; color:#8a5a08 !important } body.gzb-unified-header #gzStreak.active{ background:linear-gradient(180deg,#ffd66b,#f2a65a) !important; color:#6b3d08 !important } /* 难度条：统一为「森林寻宝机」同款三档胶囊（🌱轻松 / 🌟标准 / 🔥挑战），页头内水平排列。 同时覆盖机器自带 .seg（森林寻宝机既有的 #diffSeg.seg）与 gz-core 自动补建的 .gz-diff-seg / #gzDiffBar， 保证全站难度选择器外观完全一致。 */ body.gzb-unified-header #gzDiffBar, body.gzb-unified-header .gz-diff-seg, body.gzb-unified-header .seg{ flex:none !important; display:inline-flex !important; flex-direction:row !important; gap:0 !important; background:#fff !important; border:2px solid #f2a65a !important; border-radius:14px !important; padding:0 !important; overflow:hidden !important; box-shadow:0 2px 6px rgba(40,30,5,.12) !important } body.gzb-unified-header #gzDiffBar button, body.gzb-unified-header .gz-diff-seg button, body.gzb-unified-header .seg button{ display:inline-flex !important; align-items:center !important; gap:4px !important; width:auto !important; min-width:34px !important; padding:8px 14px !important; font-size:13px !important; font-weight:900 !important; border-radius:0 !important; border:none !important; border-right:1px solid rgba(242,166,90,.25) !important; background:#fff !important; color:#4a2c08 !important } body.gzb-unified-header #gzDiffBar button:last-child, body.gzb-unified-header .gz-diff-seg button:last-child, body.gzb-unified-header .seg button:last-child{ border-right:none !important } body.gzb-unified-header #gzDiffBar button.on, body.gzb-unified-header .gz-diff-seg button.on, body.gzb-unified-header .seg button.on{ background:#e8621c !important; color:#3a1c02 !important } /* 工具条：水平按钮组，风格与全屏/返回一致 */ body.gzb-unified-header #gzCoreBar{ flex:none !important; display:flex !important; flex-direction:row !important; gap:6px !important; align-items:center !important; margin-left:auto !important } body.gzb-unified-header #gzCoreBar .gzbtn{ padding:7px 12px !important; font-size:12px !important; font-weight:900 !important; border-radius:999px !important; border:2px solid #fff3dc !important; background:linear-gradient(180deg,#a8d06a,#86c44e) !important; color:#2c4a08 !important; box-shadow:0 3px 8px rgba(60,30,5,.18) !important; transition:transform .15s } body.gzb-unified-header #gzCoreBar .gzbtn:active{ transform:scale(.92) } /* 全屏按钮统一风格 */ body.gzb-unified-header #fsBtn{ flex:none; padding:7px 12px; font-size:12px; font-weight:900; border-radius:999px; border:2px solid #fff3dc; background:linear-gradient(180deg,#ffd66b,#f2a65a); color:#6b3d08; cursor:pointer; box-shadow:0 3px 8px rgba(60,30,5,.18); transition:transform .15s } body.gzb-unified-header #fsBtn:active{ transform:scale(.92) } /* —— 平板/电脑响应式：空间不够时隐藏文字，只显示图标 —— */ @media (max-width:1024px) and (min-height:500px){ body.gzb-unified-header #gzCoreBar .gzbtn{ padding:7px 10px !important } body.gzb-unified-header #gzCoreBar .gzbtn .l{ display:none } body.gzb-unified-header #gzCoreBar .gzbtn .em{ font-size:18px } body.gzb-unified-header #gzDiffBar button, body.gzb-unified-header .gz-diff-seg button{ padding:5px 8px !important } body.gzb-unified-header #gzDiffBar button .d-label, body.gzb-unified-header .gz-diff-seg button .d-label{ display:none } body.gzb-unified-header #gzTypeBadge span:nth-child(3){ display:none } /* 隐藏 "· 年级" */ } /* 容器查询紧凑化（2026-10-15）：机器页 .stage 常限宽 980/820，视口再大页头也只有 ~956px 可用， 视口媒体查询探不到 → 全尺寸元素总宽 ~1277px，任何屏幕下工具条都被挤到第二行且右侧留大空洞。 改按 .hud 自身实际宽度紧凑化：工具按钮只留图标 + 收起各胶囊的次要文字，一行放得下。 */ @container (max-width:1310px){ body.gzb-unified-header #gzCoreBar .gzbtn{ padding:7px 10px !important } body.gzb-unified-header #gzCoreBar .gzbtn .l{ display:none } body.gzb-unified-header #gzCoreBar .gzbtn .em{ font-size:18px } body.gzb-unified-header #gzTypeBadge span:nth-child(3){ display:none } /* 隐藏 "· 年级" */ body.gzb-unified-header .hud .logo small, body.gzb-unified-header .hud .tt small{ display:none } /* 收起页头副标题 */ body.gzb-unified-header .hud .tabs .tab{ padding:6px 10px; font-size:12px } body.gzb-unified-header .hud .tabs .tab .td{ display:none } /* 收起题型卡描述 */ body.gzb-unified-header #gzDiffBar button, body.gzb-unified-header .gz-diff-seg button{ padding:5px 8px !important } body.gzb-unified-header #gzDiffBar button .d-label, body.gzb-unified-header .gz-diff-seg button .d-label{ display:none } } /* 更小屏：强制换行，工具按钮独占一行 */ @media (max-width:640px){ body.gzb-unified-header .hud, #gzTopBar{ gap:5px 6px !important } body.gzb-unified-header #gzCoreBar{ width:100%; justify-content:flex-end; margin-left:0 !important } body.gzb-unified-header #gzDiffBar, body.gzb-unified-header .gz-diff-seg{ order:99 } } /* —— 通用浮层面板 —— */ .gz-veil{ position:fixed; inset:0; z-index:2200; background:rgba(30,18,4,.5); display:none; align-items:center; justify-content:center; padding:16px; font-family:inherit; box-sizing:border-box } .gz-veil.on{ display:flex } /* 视口封顶（2026-10-18 二修）：veil=fixed inset:0+padding，子卡 max-height:100% 恒 ≤ 视口−2×padding。 纯布局百分比，不依赖 vh/zoom 任何语义——CSS zoom 档位下 vh 曾把装扮卡顶满全屏（用户截图实证）。 */ .gz-veil .gz-card{ max-height:100% } .gz-card{ background:var(--gz-panel); border-radius:22px; width:100%; max-width:460px; max-height:calc(var(--gz-vh,1vh)*88); overflow:auto; padding:20px; box-shadow:0 20px 50px rgba(0,0,0,.4); box-sizing:border-box; scrollbar-width:thin; scrollbar-color:#8a6a3a transparent } .gz-card::-webkit-scrollbar{ width:6px } .gz-card::-webkit-scrollbar-track{ background:transparent } .gz-card::-webkit-scrollbar-thumb{ background:#8a6a3a; border-radius:3px } .gz-card h3{ margin:0 0 4px; font-size:19px; color:var(--gz-ink) } .gz-card .gz-sub{ font-size:12.5px; color:#6e5c3a; margin:0 0 14px; line-height:1.6 } html[data-theme="yuan"] .gz-card .gz-sub{ color:#6a7390 } .gz-x{ position:absolute; top:12px; right:14px; border:0; background:transparent; font-size:22px; cursor:pointer; color:#9a8a6a; line-height:1 } /* 难度档位 */ .gz-tier{ display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 4px } .gz-tier button{ flex:1; min-width:90px; border:2px solid var(--gz-line); background:#fff; border-radius:14px; padding:12px 8px; cursor:pointer; font-family:inherit; font-weight:900; color:var(--gz-ink) } .gz-tier button.on{ border-color:var(--gz-accent); background:var(--gz-soft) } .gz-tier button .t1{ font-size:15px; display:block } .gz-tier button .t2{ font-size:11px; font-weight:700; color:#6e5c3a; margin-top:3px; display:block } html[data-theme="yuan"] .gz-tier button .t2{ color:#6a7390 } .gz-note{ font-size:12px; color:#6e5c3a; background:var(--gz-soft); border-radius:12px; padding:10px 12px; margin-top:10px; line-height:1.6 } html[data-theme="yuan"] .gz-note{ color:#6a7390 } /* 思维教练 5 步 */ .gz-step{ border:2px solid var(--gz-line); border-radius:16px; padding:12px; margin-top:10px; background:#fff } .gz-step .st-h{ font-weight:900; font-size:14px; color:var(--gz-accent); display:flex; align-items:center; gap:6px } .gz-step .st-d{ font-size:12px; color:#6e5c3a; margin:4px 0 8px; line-height:1.5 } html[data-theme="yuan"] .gz-step .st-d{ color:#6a7390 } .gz-step textarea, .gz-step input{ width:100%; box-sizing:border-box; border:2px solid var(--gz-line); border-radius:10px; padding:8px 10px; font-size:13px; font-family:inherit; outline:none; resize:vertical } .gz-chips{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px } .gz-chip{ font-size:12px; padding:5px 10px; border-radius:999px; border:1.5px solid var(--gz-line); background:#f7f2e4; cursor:pointer; font-family:inherit; color:var(--gz-ink) } .gz-chip.on{ background:var(--gz-soft); border-color:var(--gz-accent); font-weight:800 } .gz-cta{ display:block; width:100%; text-align:center; margin-top:14px; border:0; border-radius:999px; padding:12px; font-size:15px; font-weight:900; cursor:pointer; font-family:inherit; background:linear-gradient(180deg,var(--gz-c2),var(--gz-c1)); color:#5a3200; box-shadow:0 3px 0 rgba(120,60,10,.32) } .gz-cta:active{ transform:translateY(2px) } html[data-theme="yuan"] .gz-cta{ color:#10204a } .gz-done{ text-align:center; padding:8px 0 } .gz-done .big{ font-size:34px } .gz-done .t{ font-weight:900; font-size:16px; color:var(--gz-accent); margin-top:6px } /* 进度备份 */ .gz-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px } .gz-b{ flex:1; min-width:130px; text-align:center; border:0; border-radius:14px; padding:12px 10px; font-size:14px; font-weight:900; cursor:pointer; font-family:inherit; color:#5a3200; background:linear-gradient(180deg,var(--gz-c2),var(--gz-c1)); box-shadow:0 3px 0 rgba(120,60,10,.32) } .gz-b.blue{ background:linear-gradient(180deg,#bcd9f2,#7fa8d0); box-shadow:0 3px 0 #4a7099; color:#12365a } html[data-theme="yuan"] .gz-b{ background:linear-gradient(180deg,var(--gz-c2),var(--gz-c1)); color:#10204a } .gz-b:active{ transform:translateY(2px) } .gz-file{ display:none } .gz-hint{ font-size:12px; color:#6e5c3a; margin-top:10px; line-height:1.6 } html[data-theme="yuan"] .gz-hint{ color:#6a7390 } /* 同步练习卡片（营地页共用） */ .qgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; margin-top:6px } .qcard{ background:var(--gz-panel); border:3px solid var(--gz-line); border-radius:22px; padding:14px 15px 16px; box-shadow:0 8px 22px rgba(60,30,5,.12) } .qhead{ display:flex; align-items:center; gap:10px; margin-bottom:8px } .qhead .qico{ font-size:30px; flex:none } .qn{ font-size:16px; font-weight:900; color:var(--gz-accent) } .qd{ font-size:12px; color:#6e5c3a; margin-top:1px } html[data-theme="yuan"] .qd{ color:#6a7390 } .qbadge{ margin-left:auto; flex:none; font-size:11px; font-weight:800; padding:3px 10px; border-radius:999px; border:1.5px solid var(--gz-line); color:#7a6a4a; background:#f7f2e4; white-space:nowrap } .qbody{ min-height:10px } .qq{ font-size:15px; font-weight:700; color:var(--gz-ink); margin:6px 0 8px; line-height:1.5 } .qopts{ display:flex; flex-direction:column; gap:7px } .qopt{ text-align:left; background:#fff; border:2px solid var(--gz-line); border-radius:12px; padding:9px 12px; font-size:14px; cursor:pointer; font-family:inherit; color:var(--gz-ink) } .qopt:hover{ border-color:var(--gz-accent) } .qopt.right{ border-color:var(--gz-accent); background:var(--gz-soft) } .qopt.wrong{ border-color:#d9a0a0; background:#fbeeed; opacity:.8 } .qwhy{ display:none; font-size:12.5px; color:#5a4a2a; background:var(--gz-soft); border-radius:12px; padding:9px 11px; margin-top:9px; line-height:1.55 } .qbtn{ display:block; width:100%; text-align:center; margin-top:10px; border:0; border-radius:999px; padding:10px; font-size:14px; font-weight:900; cursor:pointer; font-family:inherit; background:linear-gradient(180deg,var(--gz-c2),var(--gz-c1)); color:#5a3200; box-shadow:0 3px 0 rgba(120,60,10,.32) } .qbtn:active{ transform:translateY(2px) } html[data-theme="yuan"] .qbtn{ color:#10204a } /* 技能生效后的题目视觉 */ .qopt.off{ opacity:.35; text-decoration:line-through; cursor:not-allowed } .qq b.hl{ background:#ffe08a; border-radius:4px; padding:0 3px; color:#7a3a00 } .qq.on{ background:linear-gradient(180deg,rgba(255,224,138,.35),rgba(255,224,138,.1)); border-radius:10px; padding:4px 6px } .gz-skillbox{ margin-top:2px } /* 题目配图（gz-fig.js 输出的 SVG） */ .qfig{ background:#fff; border:2px solid var(--gz-line); border-radius:14px; padding:8px 10px; margin:8px 0 4px; display:flex; justify-content:center } .qfig svg{ max-height:140px } /* —— 宠物伙伴 gz-pet.js —— */ /* 5 个 tab 界面宽度统一：全部走 .wide 980px（用户指定按装扮工坊宽度统一，gz-pet.js 恒定加 wide） */ .pet-card{ max-width:800px } @media (max-width:820px){ .pet-card{ max-width:94vw } } .pet-card.wide .pet-grid{ grid-template-columns:repeat(auto-fill,minmax(210px,1fr)) } /* 宽卡下网格自动加密，避免两列拉伸空旷 */ /* 5 个 tab 高度统一：以状态页为标准（内容自然高 ≈880px，小屏被 calc(var(--gz-vh,1vh)*76) 截断，与状态页一致），内容超出面板内滚动。 2026-10-18 用户反馈「装扮页太大超一屏」二次收紧：calc(var(--gz-vh,1vh)*84)→calc(var(--gz-vh,1vh)*76)（矮窗明显小于一屏）。 配套 gz-pet.js refresh() 有 inline 同值钳制（防 CSS 缓存），两处值必须同步改。 */ .pet-card{ height:min(880px,100%) } /* —— 状态页一屏化（2026-10-16）：双栏布局 + 高度自适应 —— 左栏=伙伴信息+互动区，右栏=今日任务+本周/今日委托；桌面矮窗与平板（960×540 逻辑分辨率）一屏放下不滚动， 窄屏(<700px)自动回落单栏（此时面板内滚动，与其他 tab 行为一致）。 */ .pet-card.tab-state{ height:auto; max-height:min(880px,100%) } .pet-state2{ display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,1fr); gap:8px 18px; align-items:start } .ps-col{ min-width:0 } .pet-state2 .pet-bubble{ margin-top:10px } .pet-state2 .pet-row{ margin-top:9px } .pet-state2 .pet-input{ margin-top:9px } /* 本周委托 slim 单行卡：标题 | 进度条 | 数值 同行（原三行堆叠占高近 3 倍） */ .pet-comm.slim{ display:flex; align-items:center; gap:8px; padding:6px 10px; margin:5px 0 } .pet-comm.slim .pc-h{ flex:none; white-space:nowrap; letter-spacing:0 } .pet-comm.slim .pc-h::after{ content:'' } .pet-comm.slim .pet-bar{ flex:1; margin-top:0; height:8px } .pet-comm.slim .pc-p{ flex:none; margin-top:0; min-width:34px; text-align:right } /* 今日委托 cslim 紧凑卡：标题+任务+奖励一行、进度条独占一行（原四行堆叠） */ .pet-comm.cslim{ display:flex; flex-wrap:wrap; align-items:center; column-gap:8px; row-gap:3px; padding:5px 10px; margin:5px 0 } .pet-comm.cslim .pc-h{ flex:none; white-space:nowrap; letter-spacing:0 } .pet-comm.cslim .pc-t{ flex:1 1 auto; min-width:0; margin:0; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .pet-comm.cslim .pc-p{ flex:none; margin-top:0; font-size:10.5px; white-space:nowrap } .pet-comm.cslim .pet-bar{ flex-basis:100%; margin-top:0; height:8px } /* 一屏压缩：桌面普通窗（含浏览器工具条后可视高约 600-760px）与平板逻辑高，收紧内距与字号 */ @media (max-width:700px){ .pet-state2{ grid-template-columns:1fr } } .pet-top{ display:flex; gap:14px; align-items:flex-start } .pet-ava{ position:relative; flex:none; width:130px; aspect-ratio:178/234; border-radius:24px; overflow:visible; background:radial-gradient(circle at 50% 72%,rgba(255,236,190,.95),rgba(255,226,168,.55) 62%,rgba(255,226,168,0) 78%); border:2.5px solid var(--gz-line) } .pet-ava>img:not(.pgear){ width:100%; height:100%; object-fit:contain; position:relative; z-index:2; display:block } .pet-ava::after{ content:''; position:absolute; left:50%; bottom:12px; transform:translateX(-50%); width:74px; height:13px; border-radius:50%; background:rgba(90,60,20,.20); animation:pdShadow 2.6s ease-in-out infinite, pdShadowHold 2.6s ease-in-out infinite } /* 空闲漂浮挂「容器」不挂 img：饰品层是容器的子节点，随容器同频飘动（桌面挂件 .pd-body 一直是这个模式； 此前挂在 img 上 → 身体飘、饰品钉死，即「饰品不跟着宠物上下飘」。独立 translate/scale 关键帧， 不会冲掉面板 .pet-ava 自带的 translateX(-50%) 居中。 */ .pet-ava{ animation:pdIdle 2.6s ease-in-out infinite; transform-origin:50% 88% } .pet-ava>img:not(.pgear){ width:100%; height:100%; object-fit:contain; display:block; position:relative; z-index:1; filter:drop-shadow(0 6px 9px rgba(80,50,10,.22)) } /* 动作动画同样挂容器：身体+饰品一起做动作。面板里宿主是 .pe-float（身体与前后饰品层的共同父级），两类都列。 */ .pet-ava.act-eat, .pe-float.act-eat{ animation:pdEat .9s ease-in-out } .pet-ava.act-happy, .pe-float.act-happy{ animation:pdSpin 1.1s ease-in-out } .pet-ava.act-sad, .pe-float.act-sad{ animation:pdShake .7s ease-in-out; filter:grayscale(.45) drop-shadow(0 4px 6px rgba(80,50,10,.2)) } .pet-ava.act-up, .pe-float.act-up{ animation:pdLevel 1.3s cubic-bezier(.34,1.56,.64,1) } .pet-ava.act-blink, .pe-float.act-blink{ animation:pdBlink .32s ease-in-out } .pet-ava.act-hop, .pe-float.act-hop{ animation:pdHop .62s ease-in-out } .pet-ava .pet-fx{ position:absolute; left:50%; top:34%; z-index:2; font-size:20px; pointer-events:none; animation:pdFly 1.15s ease-out forwards } .pet-acc{ position:absolute; font-size:30px; pointer-events:none; z-index:3; filter:drop-shadow(0 2px 3px rgba(0,0,0,.2)) } .pet-acc.head{ top:11%; left:50%; transform:translateX(-50%) } .pet-acc.face{ top:26%; left:50%; transform:translateX(-50%) } .pet-acc.neck{ top:38%; left:50%; transform:translateX(-50%) } .pet-acc.back{ top:22%; left:18% } .pet-acc.hand{ top:50%; right:14% } .pet-info{ flex:1; min-width:0 } .pet-nm{ font-size:17px; font-weight:900; color:var(--gz-ink) } .pet-lv{ font-size:12px; font-weight:800; color:#fff; background:var(--gz-accent); border-radius:999px; padding:2px 9px; margin-left:4px } .pet-meta{ font-size:12.5px; color:#7a6a4a; margin-top:5px; line-height:1.5 } html[data-theme="yuan"] .pet-meta, html[data-theme="aurora"] .pet-meta{ color:#6a7390 } html[data-theme="meadow"] .pet-meta{ color:#4a6a30 } .pet-bar{ height:9px; background:#efe6d2; border-radius:999px; overflow:hidden; margin-top:3px } .pet-bar-in{ height:100%; border-radius:999px } .pet-bar-in.exp{ background:linear-gradient(90deg,var(--gz-c2),var(--gz-c1)) } .pet-bar-in.mood{ background:linear-gradient(90deg,#f6b6a8,#e86a5a) } .pet-bar-in.aff{ background:linear-gradient(90deg,#ff9ec4,#ff5e93) } .pet-legend-hint{ font-size:11.5px; font-weight:800; color:#c2466f; background:rgba(255,94,147,.12); border-radius:8px; padding:6px 8px; margin-top:8px } .pet-grow-note{ margin-top:10px; font-size:12px; color:#7a8a6e; line-height:1.7; background:rgba(47,125,79,.06); border-left:3px solid #2f7d4f; border-radius:8px; padding:8px 12px } .pet-bubble{ margin-top:12px; background:var(--gz-soft); border:2px dashed var(--gz-line); border-radius:14px; padding:10px 12px; font-size:13px; font-weight:800; color:var(--gz-ink); line-height:1.5 } .pet-chips{ display:flex; gap:6px; flex-wrap:wrap; margin-top:12px } .pet-chip{ font-size:12px; padding:6px 11px; border-radius:999px; border:1.5px solid var(--gz-line); background:#fff; cursor:pointer; font-family:inherit; color:var(--gz-ink); font-weight:800 } .pet-chip:hover{ border-color:var(--gz-accent) } .pet-row{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap } .pet-b{ flex:1; min-width:110px; border:0; border-radius:14px; padding:11px 10px; font-size:13.5px; font-weight:900; cursor:pointer; font-family:inherit; background:linear-gradient(180deg,var(--gz-c2),var(--gz-c1)); color:#5a3200; box-shadow:0 3px 0 rgba(120,60,10,.32) } .pet-b.blue{ background:linear-gradient(180deg,#bcd9f2,#7fa8d0); color:#12365a; box-shadow:0 3px 0 #4a7099 } .pet-b:active{ transform:translateY(2px) } .pet-input{ width:100%; box-sizing:border-box; margin-top:10px; border:2px solid var(--gz-line); border-radius:12px; padding:9px 11px; font-size:13px; font-family:inherit; outline:none } .pet-note{ font-size:12px; color:#6e5c3a; background:var(--gz-soft); border-radius:12px; padding:10px 12px; margin-top:10px; line-height:1.6 } .pet-toast{ position:fixed; left:50%; bottom:78px; transform:translateX(-50%) translateY(20px); z-index:2600; background:rgba(48,28,8,.92); color:#ffe9c4; font-size:13.5px; font-weight:800; padding:10px 16px; border-radius:999px; box-shadow:0 8px 22px rgba(0,0,0,.35); opacity:0; transition:.35s; max-width:86vw; text-align:center; font-family:inherit } .pet-toast.in{ opacity:1; transform:translateX(-50%) translateY(0) } /* —— 桌面宠物挂件（常驻右下角，透明底，会呼吸会动） —— */ .pet-dock{ position:fixed; right:22px; bottom:78px; z-index:1600; width:104px; height:118px; cursor:pointer; user-select:none; -webkit-user-select:none; touch-action:none; font-family:inherit; transform:translateZ(0) } /* 独立合成层：防止 fixed 背景页导航时的陈旧纹理残影叠进挂件区域 */ /* 桌面大屏：给宠物更多右边距，避免被长文案工具条挤到屏幕外 */ @media (min-width:1200px){ .pet-dock{ right:26px; bottom:86px; width:110px; height:124px } } /* 矮屏桌面（如 1366×768 以下高度）：整体上移，防止被底部工具条压住 */ @media (max-height:720px){ .pet-dock{ bottom:98px } } @media (max-height:640px){ #gzCoreBar{ flex-direction:row; right:18px; bottom:12px; gap:6px; align-items:flex-end } #gzCoreBar .gzbtn{ padding:7px 10px; font-size:11.5px } .pet-dock{ right:22px; bottom:74px; width:92px; height:104px } } /* 平板竖屏/横屏：宠物 dock 整体上移，避免底部工具条堆叠 */ @media (max-width:1024px) and (min-height:500px){ .pet-dock{ right:18px; bottom:110px; width:92px; height:104px } .pet-dock .pd-lv{ font-size:9px; padding:1px 6px } } /* 手机/小屏：再缩小并上移 */ @media (max-width:480px){ .pet-dock{ right:12px; bottom:96px; width:78px; height:90px } .pet-dock .pd-body>img{ width:100%; height:100% } .pet-dock .pd-lv{ font-size:8px } .pet-dock .pd-say{ right:calc(100% + 4px); bottom:34px; max-width:60vw; font-size:11px } } .pet-dock .pd-body{ position:absolute; inset:0 0 10px 0; animation:pdIdle 2.8s ease-in-out infinite; transform-origin:50% 90%; filter:drop-shadow(0 5px 8px rgba(70,40,10,.28)) } .pet-dock .pd-body>img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; pointer-events:none; opacity:0 } .pet-dock .pd-body img.on{ opacity:1 } .pet-dock .pd-body .pet-acc{ position:absolute; font-size:22px; pointer-events:none; filter:drop-shadow(0 2px 3px rgba(0,0,0,.25)) } .pet-dock .pd-body .pet-acc.head{ top:9%; left:50%; transform:translateX(-50%) } .pet-dock .pd-body .pet-acc.face{ top:24%; left:50%; transform:translateX(-50%) } .pet-dock .pd-body .pet-acc.neck{ top:36%; left:50%; transform:translateX(-50%) } .pet-dock .pd-body .pet-acc.back{ top:20%; left:18% } .pet-dock .pd-body .pet-acc.hand{ top:48%; right:12% } /* 饰品层淡入淡出：切到眨眼/欢呼帧（b/c）时隐藏（饰品按站姿 a 帧定位，底图变了饰品会错位） */ .pet-dock .pd-body .pet-acc, .pet-dock .pd-body .pgear, .pet-dock .pd-body .pgear-layer{ transition:opacity .15s ease } .pet-dock .pd-body.alt-frame .pet-acc, .pet-dock .pd-body.alt-frame .pgear, .pet-dock .pd-body.alt-frame .pgear-layer{ opacity:0 } .pet-dock .pd-shadow{ position:absolute; left:50%; bottom:4px; transform:translateX(-50%); width:58px; height:11px; border-radius:50%; background:rgba(70,45,12,.25); animation:pdShadow 2.8s ease-in-out infinite } .pet-dock .pd-x{ position:absolute; top:-6px; right:-4px; width:22px; height:22px; border-radius:50%; border:0; cursor:pointer; background:#fff; color:#8a6a3a; font-size:14px; line-height:20px; padding:0; opacity:0; transition:opacity .2s; box-shadow:0 2px 6px rgba(0,0,0,.25); font-family:inherit } .pet-dock:hover .pd-x{ opacity:1 } .pet-dock.act-eat .pd-body{ animation:pdEat .9s ease-in-out } .pet-dock.act-happy .pd-body{ animation:pdSpin 1.1s ease-in-out } .pet-dock.act-sad .pd-body{ animation:pdShake .7s ease-in-out; filter:grayscale(.5) drop-shadow(0 3px 5px rgba(70,40,10,.2)) } .pet-dock.act-up .pd-body{ animation:pdLevel 1.3s cubic-bezier(.34,1.56,.64,1) } .pet-dock.act-blink .pd-body{ animation:pdBlink .34s ease-in-out } .pet-dock.act-hop .pd-body{ animation:pdHop .6s ease-in-out } .pet-dock.act-tilt .pd-body{ animation:pdTilt 1s ease-in-out } .pet-dock .pd-fx{ position:absolute; left:50%; top:22%; z-index:2; font-size:19px; pointer-events:none; animation:pdFly 1.15s ease-out forwards } .pet-dock .pd-say{ position:absolute; right:calc(100% + 6px); bottom:44px; white-space:nowrap; max-width:46vw; overflow:hidden; text-overflow:ellipsis; background:#fff; border:2px solid rgba(160,120,60,.35); border-radius:14px 14px 4px 14px; padding:7px 11px; font-size:12.5px; font-weight:800; color:#4a3010; box-shadow:0 6px 16px rgba(0,0,0,.18); animation:pdPop .3s ease-out; pointer-events:none } .pet-dock .pd-lv{ position:absolute; left:50%; bottom:-4px; transform:translateX(-50%); font-size:10px; font-weight:900; color:#5a2a05; background:linear-gradient(180deg,#ffb84d,#f08a2a); border-radius:999px; padding:1px 8px; box-shadow:0 2px 4px rgba(120,60,10,.35); pointer-events:none; white-space:nowrap } /* —— 大号陪伴位挂件（body.gz-dock-big，用于数学森林首页等大留白页面）：整体放大 ~1.4×， Lv 徽章同步放大保证可读；密集单机页不带该类，保持紧凑尺寸避免遮挡按钮 —— */ body.gz-dock-big .pet-dock{ right:22px; bottom:78px; width:146px; height:165px } @media (min-width:1200px){ body.gz-dock-big .pet-dock{ right:36px; bottom:120px; width:154px; height:174px } } @media (max-height:720px){ body.gz-dock-big .pet-dock{ bottom:137px } } @media (max-height:640px){ body.gz-dock-big .pet-dock{ right:22px; bottom:104px; width:129px; height:146px } } @media (max-width:1024px) and (min-height:500px){ body.gz-dock-big .pet-dock{ right:25px; bottom:154px; width:129px; height:146px } body.gz-dock-big .pet-dock .pd-lv{ font-size:13px; padding:2px 9px } } @media (max-width:480px){ body.gz-dock-big .pet-dock{ right:17px; bottom:134px; width:109px; height:126px } body.gz-dock-big .pet-dock .pd-lv{ font-size:12px; padding:2px 9px } body.gz-dock-big .pet-dock .pd-say{ font-size:15px } } body.gz-dock-big .pet-dock .pd-body{ inset:0 0 12px 0 } body.gz-dock-big .pet-dock .pd-body .pet-acc{ font-size:30px } body.gz-dock-big .pet-dock .pd-shadow{ width:81px; height:15px } body.gz-dock-big .pet-dock .pd-x{ top:-8px; right:-6px; width:30px; height:30px; font-size:20px; line-height:28px } body.gz-dock-big .pet-dock .pd-fx{ font-size:26px } body.gz-dock-big .pet-dock .pd-say{ font-size:17px } body.gz-dock-big .pet-dock .pd-lv{ font-size:14px; padding:2px 12px; bottom:-5px } /* 2026-10-15：pd* 关键帧改用独立 transform 属性（translate/rotate/scale）。 原因：漂浮/动作动画要挂到「容器」（.pet-ava/.pe-float/.pd-body）上，饰品作为子节点才跟着同频动； 而面板 .pet-ava、房间 .pr-item 自带 transform:translate(-50%,…) 居中，transform 关键帧会冲掉它 （房间家具此前因此整体偏移半个身位）。独立属性与 transform 叠加不互覆盖。 */ @keyframes pdIdle{ 0%,100%{ translate:0 0; scale:1 1 } 32%{ translate:0 -4px; scale:1.015 1.03 } 58%{ translate:0 0; scale:.995 .975 } 78%{ translate:0 -1.5px; scale:1.005 1.01 } } @keyframes pdShadow{ 0%,100%{ transform:translateX(-50%) scaleX(1); opacity:.26 } 32%{ transform:translateX(-50%) scaleX(.84); opacity:.15 } 58%{ transform:translateX(-50%) scaleX(1.05); opacity:.3 } } /* 影子不随身体飘：独立 translate 把身体的漂浮量抵消（叠加在 pdShadow 的 transform 之前，不互覆盖） */ @keyframes pdShadowHold{ 0%,100%{ translate:0 0 } 32%{ translate:0 4px } 58%{ translate:0 0 } 78%{ translate:0 1.5px } } @keyframes pdBlink{ 0%,100%{ scale:1 1 } 45%{ scale:1.02 .94 } 70%{ scale:1 1 } } @keyframes pdHop{ 0%,100%{ translate:0 0; scale:1 1 } 18%{ translate:0 2px; scale:1.06 .9 } 55%{ translate:0 -16px; scale:.94 1.1 } 85%{ translate:0 0; scale:1.04 .94 } } @keyframes pdTilt{ 0%,100%{ rotate:0deg } 30%{ rotate:-6deg; translate:0 -2px } 65%{ rotate:4deg } } @keyframes pdSpin{ 0%{ rotate:0deg; scale:1 1 } 35%{ rotate:-10deg; translate:0 -10px; scale:1.06 1.06 } 70%{ rotate:360deg; translate:0 0; scale:1 1 } 100%{ rotate:360deg; scale:1 1 } } @keyframes pdShake{ 0%,100%{ translate:0 0 } 20%{ translate:-5px 0; rotate:-3deg } 45%{ translate:5px 0; rotate:3deg } 70%{ translate:-4px 0; rotate:-2deg } } @keyframes pdEat{ 0%,100%{ scale:1 1 } 22%{ scale:1.08 .86 } 40%{ scale:.96 1.08 } 58%{ scale:1.07 .88 } 76%{ scale:.98 1.04 } } @keyframes pdLevel{ 0%{ scale:1 1; filter:brightness(1) } 30%{ scale:.9 1.14; filter:brightness(1.6) } 60%{ scale:1.22 .86; filter:brightness(1.3) } 80%{ scale:.96 1.06 } 100%{ scale:1 1; filter:brightness(1) } } @keyframes pdFly{ 0%{ transform:translate(-50%,0) scale(.5); opacity:0 } 18%{ opacity:1 } 100%{ transform:translate(-50%,-52px) scale(1.25); opacity:0 } } @keyframes pdPop{ 0%{ transform:scale(.6); opacity:0 } 100%{ transform:scale(1); opacity:1 } } /* —— 技能栏（答题卡片下方，真的能用） —— */ .pet-skills{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:10px } .pet-skills .ps-t{ font-size:12px; font-weight:900; color:#8a6a3a; margin-right:2px } .ps-b{ display:inline-flex; align-items:center; gap:5px; border:2px solid rgba(160,120,60,.35); background:#fffdf6; cursor:pointer; border-radius:999px; padding:5px 10px; font-size:12px; font-weight:800; color:#4a3010; font-family:inherit; transition:transform .12s } .ps-b:hover{ transform:translateY(-2px); border-color:#f0a63a } .ps-b .ps-i{ font-size:15px } .ps-b .ps-c{ font-size:11px; color:#b07a2a; font-weight:900 } .ps-b.lock{ opacity:.45; filter:grayscale(1) } .ps-b.no{ background:#f6efe2 } .ps-b:active{ transform:translateY(1px) } .pet-skills.big{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:8px } .ps-card{ border:2px solid rgba(160,120,60,.3); border-radius:14px; padding:9px 11px; background:#fffdf6 } .ps-card .ps-h{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:900; color:#4a3010 } .ps-card .ps-h .ps-i{ font-size:18px } .ps-card .ps-h .ps-c{ margin-left:auto; font-size:11px; color:#b07a2a } .ps-card .ps-t2{ font-size:11.5px; color:#7a6a4a; margin-top:4px; line-height:1.45 } .ps-card.lock{ opacity:.55; filter:grayscale(.8) } /* —— 装扮 / 成就 / 任务 / Tab —— */ .pet-tabs{ display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap } .pet-tabs button{ border:2px solid rgba(160,120,60,.3); background:#fffdf6; border-radius:999px; padding:7px 13px; font-size:12.5px; font-weight:900; cursor:pointer; font-family:inherit; color:#6a4a1a } .pet-tabs button.on{ background:linear-gradient(180deg,#ffd98a,#f0a63a); color:#4a3005; border-color:#f0a63a } .pet-sec{ font-size:12px; font-weight:900; color:#8a6a3a; margin:12px 0 6px } .pet-wear{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px } .pet-w{ border:2px solid rgba(160,120,60,.28); background:#fffdf6; border-radius:14px; padding:8px 4px; cursor:pointer; font-family:inherit; display:flex; flex-direction:column; align-items:center; gap:2px; transition:transform .12s } .pet-w:hover{ transform:translateY(-2px) } .pet-w .pw-i{ font-size:24px; line-height:1 } .pet-w .pw-n{ font-size:11.5px; font-weight:900; color:#4a3010 } .pet-w .pw-d{ font-size:10px; color:#9a8a6a; text-align:center; line-height:1.3 } .pet-w.on{ border-color:#f0a63a; background:linear-gradient(180deg,#fff3d6,#ffe4b0); box-shadow:0 0 0 3px rgba(240,166,58,.2) } .pet-w.lock{ opacity:.5; filter:grayscale(.85) } .pet-achs{ display:grid; grid-template-columns:repeat(2,1fr); gap:7px } .pet-ach-item{ border:2px solid rgba(160,120,60,.28); border-radius:14px; padding:8px 10px; background:#fffdf6 } .pet-quests{ margin-top:10px; border:2px dashed rgba(160,120,60,.35); border-radius:14px; padding:9px 11px; background:#fffdf6 } .pet-quest{ display:flex; justify-content:space-between; font-size:12px; font-weight:800; color:#6a4a1a; line-height:1.9 } .pet-quest b{ color:#b07a2a } .pet-quest.ok{ color:#3a7a2a } .pet-quest-note{ font-size:11px; color:#9a8a6a; margin-top:5px; text-align:center } .pet-ach-item .pa-i{ font-size:22px } .pet-ach-item .pa-n{ font-size:12px; font-weight:900; color:#4a3010; margin-top:2px } .pet-ach-item .pa-d{ font-size:10.5px; color:#9a8a6a; line-height:1.35 } .pet-ach-item.got{ border-color:#f0a63a; background:linear-gradient(180deg,#fff3d6,#ffe8bd) } /* —— 统一卡片网格：技能 / 成就 / 家具共用同一套解剖（同列数、同圆角、同头部行）， 消除各 tab 各写一套网格的突兀感。旧 .ps-card/.pet-ach-item/.pet-w 规则保留兼容答题页小技能条 —— */ .pet-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:8px } .pet-cell{ border:2px solid rgba(160,120,60,.3); border-radius:14px; padding:9px 11px; background:#fffdf6; cursor:default; min-width:0 } .pet-cell .pc-h{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:900; color:#4a3010; min-width:0 } .pet-cell .pc-h .pc-i{ font-size:18px; line-height:1; flex:none } .pet-cell .pc-h b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .pet-cell .pc-h .pc-c{ margin-left:auto; font-size:11px; color:#b07a2a; white-space:nowrap; flex:none } .pet-cell .pc-d{ font-size:11.5px; color:#7a6a4a; margin-top:4px; line-height:1.45 } .pet-cell.lock{ opacity:.55; filter:grayscale(.8) } .pet-cell.on{ border-color:#f0a63a; background:linear-gradient(180deg,#fff3d6,#ffe8bd); box-shadow:0 0 0 3px rgba(240,166,58,.2) } .pet-cell.on .pc-c{ color:#3a7a2a; font-weight:900 } /* —— 游戏级特效 —— */ .pd-ring{ position:absolute; left:50%; top:44%; width:40px; height:40px; margin:-20px 0 0 -20px; border-radius:50%; border:3px solid rgba(255,190,80,.9); animation:pdRing .85s ease-out forwards; pointer-events:none; z-index:3 } @keyframes pdRing{ 0%{ transform:scale(.4); opacity:.95 } 100%{ transform:scale(3.4); opacity:0 } } .pd-coin{ position:fixed; z-index:2700; font-size:22px; pointer-events:none; transition:transform .72s cubic-bezier(.5,-0.3,.6,1),opacity .72s; } .pet-lvup{ position:fixed; inset:0; z-index:2900; display:flex; align-items:center; justify-content:center; background:rgba(30,18,4,.55); opacity:0; transition:opacity .35s; font-family:inherit; pointer-events:none } /* 2026-10-19k：纯展示庆祝不拦操作——修「升级 2.6s 内全页点不动」（儿童连点必踩），探针 click 竞态同根因 */ .pet-lvup.on{ opacity:1 } .lvup-card{ background:linear-gradient(180deg,#fff8e8,#ffe9c0); border:4px solid #f0a63a; border-radius:24px; padding:20px 26px; text-align:center; box-shadow:0 18px 44px rgba(0,0,0,.4); animation:pdPop .4s ease-out; position:relative; overflow:visible } .lvup-t{ font-size:22px; font-weight:900; color:#e08a10; letter-spacing:2px } .lvup-pet img{ width:150px; height:150px; object-fit:contain; animation:pdHop .8s ease-in-out infinite } .lvup-n{ font-size:16px; font-weight:900; color:#4a3010 } .lvup-d{ font-size:12.5px; color:#8a6a3a; margin-top:4px } .lvup-cf{ position:absolute; top:-10px; font-size:20px; animation:cfFall 2.4s linear forwards } @keyframes cfFall{ 0%{ transform:translateY(0) rotate(0); opacity:1 } 100%{ transform:translateY(320px) rotate(320deg); opacity:0 } } .pet-ach-card{ position:fixed; left:50%; top:16px; transform:translate(-50%,-30px); z-index:2950; opacity:0; transition:.4s; background:linear-gradient(180deg,#fff8e8,#ffe9c0); border:3px solid #f0a63a; border-radius:18px; padding:10px 16px; display:flex; gap:10px; align-items:center; box-shadow:0 12px 30px rgba(0,0,0,.35); font-family:inherit } .pet-ach-card.on{ opacity:1; transform:translate(-50%,0) } .pet-ach-card .ach-ic{ font-size:28px } .pet-ach-card .ach-t{ font-size:13.5px; font-weight:900; color:#4a3010 } .pet-ach-card .ach-d{ font-size:11.5px; color:#8a6a3a; margin-top:2px } /* —— 宠物小房间 —— */ .pet-room{ position:relative; height:220px; border-radius:18px; overflow:hidden; margin-top:10px; border:2px solid rgba(160,120,60,.35); background:linear-gradient(180deg,#dcefc4 0%,#e9f5d6 44%,#f2e2be 44%,#e6cd9c 100%) } .pet-room .pr-item{ position:absolute; font-size:26px; transform:translate(-50%,-50%); animation:pdIdle 3.4s ease-in-out infinite } .pr-pet{ position:absolute; left:56%; top:88%; bottom:auto; transform:translate(-50%,-50%); width:12%; height:auto; aspect-ratio:132/150; z-index:4 } .pr-pet img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; animation:pdIdle 2.8s ease-in-out infinite; filter:drop-shadow(0 4px 7px rgba(80,50,10,.25)) } .pr-pet .pet-acc{ font-size:22px } .pr-pet .pet-acc.head{ top:11%; left:50%; transform:translateX(-50%) } .pr-pet .pet-acc.face{ top:27%; left:50%; transform:translateX(-50%) } .pr-pet .pet-acc.neck{ top:39%; left:50%; transform:translateX(-50%) } .pr-pet .pet-acc.back{ top:22%; left:18% } .pr-pet .pet-acc.hand{ top:50%; right:16% } /* —— 房间家具可交互 —— */ .pet-room .pr-item{ cursor:pointer; transition:transform .16s ease; z-index:3 } .pet-room .pr-item:hover{ transform:translate(-50%,-50%) scale(1.28) } .pr-pet{ transition:left .7s cubic-bezier(.34,1.35,.64,1), top .7s cubic-bezier(.34,1.35,.64,1), transform .3s } /* —— P0 即时反馈层（juice）：答对庆祝 / 答错温和提示（零侵入，覆盖全部机器） —— */ .gz-fx-ok{ box-shadow:0 0 0 3px rgba(255,184,77,.62), 0 6px 18px rgba(255,170,40,.32) !important; transition:box-shadow .25s; } .gz-fx-bad{ box-shadow:0 0 0 3px rgba(220,90,70,.42) !important; background:rgba(255,236,230,.7) !important; transition:box-shadow .25s, background .25s; } /* —— 每日宠物委托 —— */ .pet-comm{ border:2px solid rgba(240,166,58,.5); border-radius:14px; padding:10px 12px; margin:8px 0; background:linear-gradient(180deg,#fff8e6,#ffedc8) } .pet-comm.ok{ border-color:#7cb95c; background:linear-gradient(180deg,#f0fae6,#def0cd) } .pet-comm .pc-h{ font-size:11.5px; font-weight:900; color:#b06a10; letter-spacing:1px } .pet-comm .pc-t{ font-size:14.5px; font-weight:800; color:#4a3010; margin:3px 0 6px } .pet-comm .pc-t b{ color:#e08a10 } .pet-comm .pc-p{ font-size:11.5px; color:#8a6a3a; margin-top:5px; font-weight:700 } .pet-comm-tip{ font-size:12px; color:#7a5a28; text-align:center; margin-top:8px; font-weight:700 } /* —— 传说形态升级特效 —— */ .pet-lvup.legend{ background:radial-gradient(circle at 50% 42%, rgba(255,214,90,.5), rgba(255,240,200,.25) 42%, rgba(40,28,6,.72) 100%) } .pet-lvup.legend .lvup-card{ border-color:#ffd34e; background:linear-gradient(180deg,#fffbe8,#ffefb8); box-shadow:0 0 0 6px rgba(255,211,78,.25), 0 0 60px rgba(255,200,40,.55) } .pet-lvup.legend .lvup-t{ color:#c8860a; text-shadow:0 0 12px rgba(255,200,40,.8) } .lvup-halo{ position:absolute; left:50%; top:42%; width:340px; height:340px; transform:translate(-50%,-50%); border-radius:50%; pointer-events:none; animation:haloSpin 5s linear infinite; background:conic-gradient(from 0deg, rgba(255,220,120,0) 0deg, rgba(255,220,120,.55) 60deg, rgba(255,220,120,0) 120deg, rgba(255,220,120,0) 180deg, rgba(255,220,120,.45) 240deg, rgba(255,220,120,0) 300deg); filter:blur(4px) } @keyframes haloSpin{ to{ transform:translate(-50%,-50%) rotate(360deg) } } /* —— 成长日记 —— */ .pet-diary{ max-height:240px; overflow:auto; margin-top:8px; border:1.5px solid rgba(160,120,60,.25); border-radius:12px; background:#fffdf6 } .pd-row{ display:flex; gap:8px; align-items:center; padding:7px 10px; border-bottom:1px dashed rgba(160,120,60,.2) } .pd-row .pd-d{ color:#a08050; font-size:11px; flex:none } .pd-row .pd-i{ font-size:16px; flex:none } .pd-row .pd-x{ color:#4a3010; font-weight:700; font-size:12.5px } /* —— 迷你游戏《接果子》· 森林果园主题（20261016 重绘：木框卡片 + 果园场景 + 宠物接果篮）—— */ .gz-game-veil{ z-index:2800 } .gz-game{ max-width:420px; width:100%; padding:0 0 12px; position:relative; overflow:hidden; background:linear-gradient(180deg,#fff8e8,#ffedcb); border:3px solid #d99a3e; border-radius:22px; box-shadow:0 18px 50px rgba(40,20,0,.45), inset 0 0 0 2px rgba(255,255,255,.65) } .gz-game-title{ display:flex; align-items:center; justify-content:center; gap:6px; padding:11px 12px 10px; font-size:15.5px; font-weight:900; color:#fff7e0; letter-spacing:1px; text-shadow:0 2px 4px rgba(80,40,0,.55); background:linear-gradient(180deg,#8a5a24,#6b4218) } .gz-game-hud{ display:flex; justify-content:center; gap:8px; padding:10px 12px 0; flex-wrap:wrap } .gz-game-hud span{ background:#fffdf5; border:2px solid #ecd9a8; border-radius:999px; padding:4px 12px; font-size:12.5px; font-weight:900; color:#6b4a14; box-shadow:0 2px 5px rgba(90,50,0,.12) } .gz-game-hud b{ color:#c07a10 } .gz-game-area{ position:relative; height:calc(var(--gz-vh,1vh)*52); min-height:300px; max-height:440px; overflow:hidden; border-radius:16px; margin:10px 12px 0; border:2.5px solid #b97f34; cursor:ew-resize; touch-action:none; user-select:none; background:linear-gradient(180deg,#bfe7ff 0%,#e8f8ff 56%,#cdeeb6 56%,#a8dd8c 100%); box-shadow:inset 0 4px 16px rgba(60,40,0,.18) } .gz-game-area::before{ content:''; position:absolute; top:14px; right:18px; width:44px; height:44px; border-radius:50%; background:radial-gradient(circle,#fff3ae 28%,#ffd75e 72%); box-shadow:0 0 26px rgba(255,210,90,.85); opacity:.92 } .gz-game-area::after{ content:'☁️'; position:absolute; top:12px; left:16px; font-size:26px; opacity:.85; filter:drop-shadow(0 2px 3px rgba(0,0,0,.12)) } .gz-basket{ position:absolute; bottom:8px; left:0; width:84px; height:84px; transition:transform .1s linear; will-change:transform } .gz-basket img{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:62px; height:62px; object-fit:contain; filter:drop-shadow(0 3px 5px rgba(0,0,0,.3)); pointer-events:none } .gz-basket-tub{ position:absolute; bottom:-3px; left:50%; transform:translateX(-50%); font-size:36px; line-height:1; filter:drop-shadow(0 3px 4px rgba(0,0,0,.32)); pointer-events:none } .gz-basket.shake{ animation:pdShake .4s ease-in-out } .gz-drop{ position:absolute; font-size:30px; will-change:top; filter:drop-shadow(0 3px 4px rgba(40,25,0,.3)) } .gz-drop.gem{ filter:drop-shadow(0 0 9px rgba(255,220,120,.95)) } .gz-drop.star{ filter:drop-shadow(0 0 7px rgba(255,240,180,.9)) } .gz-drop.bomb{ filter:drop-shadow(0 0 7px rgba(255,80,80,.65)) } .gz-pop{ position:absolute; font-size:15px; font-weight:900; color:#c07a10; animation:pdFly .7s ease-out forwards; pointer-events:none; text-shadow:0 1px 0 #fff8e0 } .gz-game-tip{ display:block; width:max-content; max-width:92%; margin:10px auto 0; font-size:11.5px; color:#7a5a22; text-align:center; line-height:1.5; background:#fffdf5; border:1.5px dashed #e0c88a; border-radius:999px; padding:5px 14px } .gz-game-over{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; background:rgba(30,18,4,.5); border-radius:19px; backdrop-filter:blur(2px) } .gz-go-card{ background:linear-gradient(180deg,#fff8e8,#ffe9c0); border:3px solid #f0a63a; border-radius:18px; padding:16px 18px; text-align:center; box-shadow:0 14px 34px rgba(0,0,0,.35); animation:pdPop .35s ease-out; max-width:90% } .gz-go-t{ font-size:15px; font-weight:900; color:#c07a10 } .gz-go-s{ font-size:30px; font-weight:900; color:#4a3010; margin:2px 0 } .gz-go-r{ font-size:13px; font-weight:800; color:#3a7a2a } .gz-go-n{ font-size:11.5px; color:#8a6a3a; margin-top:6px; line-height:1.5 } .gz-go-b{ display:flex; gap:8px; margin-top:12px } .gz-go-b .pet-b{ min-width:0 } .pet-b.green{ background:linear-gradient(180deg,#bfe6a8,#7ec25a); color:#12360a; box-shadow:0 3px 0 #4d8a33 } /* —— 宠物面板 P0 整顿（5Tab 单行 + 状态页重排）—— */ /* 5 栏等宽：用 grid 强制每列相同宽度，任何浏览器（含 Edge）下都确定性一致 */ .pet-tabs{ display:grid; grid-template-columns:repeat(5,1fr); gap:5px; margin-bottom:12px } .pet-tabs button{ padding:7px 4px; font-size:12px; text-align:center; white-space:nowrap; min-width:0; width:100% } @media (max-width:380px){ .pet-tabs{ grid-template-columns:repeat(3,1fr) } .pet-tabs button{ padding:7px 6px } } .pet-stat{ display:flex; align-items:center; gap:8px; margin-top:7px } .pet-stat .pst-l{ flex:none; width:30px; font-size:11.5px; font-weight:900; color:#8a6a3a } .pet-stat .pet-bar{ flex:1; margin-top:0 } .pet-stat .pst-v{ flex:none; min-width:52px; text-align:right; font-size:11px; font-weight:900; color:#6a4a1a } .pet-chips2{ display:flex; gap:6px; flex-wrap:wrap; margin-top:9px } .pet-chip-s{ font-size:11.5px; font-weight:900; color:#6a4a1a; background:var(--gz-soft); border:1.5px solid var(--gz-line); border-radius:999px; padding:4px 10px; white-space:nowrap } .pet-b.sm{ flex:0 1 auto; min-width:0; padding:8px 14px; font-size:12px; box-shadow:0 2px 0 rgba(120,60,10,.28) } /* —— 游戏级装备界面（仿 RPG 双页：左角色环绕槽位 + 右背包格子）—— */ .pet-card.wide{ max-width:min(980px,94vw) } .pe-equip{ display:grid; grid-template-columns:47% 1fr; gap:8px; margin-top:4px } .pe-left,.pe-right{ border:2.5px solid rgba(122,84,36,.55); border-radius:16px; padding:10px 11px; background:linear-gradient(160deg,#fdf3dd 0%,#f7e7c2 58%,#f2dcb0 100%); box-shadow:inset 0 0 0 2px rgba(255,250,235,.7), inset 0 0 26px rgba(150,105,40,.14) } .pe-title{ font-size:13px; font-weight:900; color:#6a4514; letter-spacing:2px; text-align:center; margin-bottom:8px; background:linear-gradient(180deg,#eac98f,#d9ab5e); color:#4a2f08; border-radius:999px; padding:5px 8px; box-shadow:inset 0 1px 0 rgba(255,240,210,.8), 0 2px 0 rgba(120,80,20,.25) } .pe-stage{ position:relative; height:280px; border-radius:14px; background:radial-gradient(circle at 50% 74%, rgba(255,236,190,.95), rgba(250,228,175,.5) 60%, rgba(250,228,175,0) 78%); border:2px dashed rgba(140,95,35,.4) } .pe-stage .pet-ava{ position:absolute; left:50%; bottom:6px; transform:translateX(-50%); width:190px; height:240px; border:0; background:none; border-radius:0 } .pe-stage .pet-ava::after{ bottom:4px } .pe-socket{ position:absolute; width:58px; height:58px; border-radius:12px; cursor:pointer; font-family:inherit; border:2.5px solid rgba(122,84,36,.5); background:linear-gradient(180deg,#fffaf0,#f3e3bd); box-shadow:inset 0 2px 5px rgba(120,80,20,.18), 0 2px 0 rgba(120,80,20,.22); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; padding:0 } .pe-socket img{ width:78%; height:78%; object-fit:contain; pointer-events:none } .pe-socket .pe-plus{ font-size:20px; color:#c9a76a; font-weight:900; line-height:1 } .pe-socket.on{ border-color:#e0921a; background:linear-gradient(180deg,#fff3d2,#ffdf9e); box-shadow:inset 0 2px 5px rgba(160,100,10,.2), 0 0 0 3px rgba(240,166,58,.25) } .pe-sl-nm{ position:absolute; left:50%; bottom:-19px; transform:translateX(-50%); font-size:10px; font-weight:900; color:#8a6530; white-space:nowrap } .pe-sock-head{ top:6px; left:10px } .pe-sock-face{ top:6px; right:10px } .pe-sock-neck{ top:104px; left:6px } .pe-sock-back{ top:104px; right:6px } .pe-sock-hand{ bottom:30px; left:10px } .pe-stats{ margin-top:10px } .pe-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px } .pe-cell{ position:relative; border:2px solid rgba(122,84,36,.4); border-radius:12px; cursor:pointer; font-family:inherit; background:linear-gradient(180deg,#fffaf0,#f6e8c8); padding:8px 4px 6px; display:flex; flex-direction:column; align-items:center; gap:2px; transition:transform .12s } .pe-cell:hover{ transform:translateY(-2px); border-color:#e0921a } /* 饰品缩略图：纯展示放大 + 浅色圆盘底衬（不改原图尺寸），深色饰品在暗色面板上也能看清 */ .pe-cell .pe-c-i{ width:62px; height:62px; display:flex; align-items:center; justify-content:center; font-size:38px; transition:transform .18s ease; border-radius:50%; background:radial-gradient(circle at 50% 36%, #fffbe9 0%, #f6e8c4 62%, #e7d2a2 100%); box-shadow:inset 0 -4px 7px rgba(120,80,20,.26), inset 0 2px 5px rgba(255,255,255,.8), 0 1.5px 3px rgba(60,40,10,.18) } .pe-cell .pe-c-i img{ width:88%; height:88%; object-fit:contain; filter:drop-shadow(0 2px 3px rgba(60,40,10,.35)); animation:peBreath 3.4s ease-in-out infinite } .pe-cell.locked .pe-c-i{ background:radial-gradient(circle at 50% 36%, #ece6d8, #d4c8ac) } .pe-cell .pe-c-n{ font-size:11.5px; font-weight:900; color:#4a3010 } .pe-cell .pe-c-d{ font-size:10px; color:#9a8a6a; text-align:center; line-height:1.25 } .pe-cell.equipped{ border-color:#e0921a; background:linear-gradient(180deg,#fff3d2,#ffe3a4); box-shadow:0 0 0 3px rgba(240,166,58,.25) } .pe-cell.equipped::after{ content:'✓'; position:absolute; top:-7px; right:-7px; width:20px; height:20px; border-radius:50%; background:#f0a63a; color:#fff; font-size:12px; font-weight:900; line-height:20px; box-shadow:0 2px 4px rgba(150,90,10,.4) } .pe-cell.locked{ opacity:.55; filter:grayscale(.85) } /* 未解锁伙伴：原图变深色剪影 + ??? 名字 + 解锁条件，制造"想要而不可得"的收集钩子 */ .pe-cell.lock-pet{ cursor:not-allowed; opacity:.9; border-style:dashed; border-color:rgba(122,84,36,.55) } .pe-cell.lock-pet .pe-c-i{ background:radial-gradient(circle at 50% 36%, #e6ddc9, #cdbf9d) } .pe-cell.lock-pet .pe-c-i img.sil{ width:82%; height:82%; object-fit:contain; filter:brightness(0) opacity(.32); animation:peSway 5s ease-in-out infinite } .pe-cell.lock-pet .pe-c-n{ color:#9a8a6a } .pe-cell.lock-pet .pe-c-d{ color:#a07a2a; font-weight:700 } /* 图鉴活体动效：① 卡片呼吸(peBreath) ② 悬停放大到 pe-c-i 层(不干扰 img 呼吸) ③ 锁定卡轻微摇曳(peSway) */ .pe-cell:hover .pe-c-i{ transform:scale(1.16); box-shadow:inset 0 -4px 7px rgba(120,80,20,.3), inset 0 2px 5px rgba(255,255,255,.9), 0 5px 12px rgba(60,40,10,.32) } .pe-cell.equipped{ animation:pePulse 2.4s ease-in-out infinite } @keyframes peBreath{ 0%,100%{ transform:translateY(0) scale(1) } 50%{ transform:translateY(-3px) scale(1.025) } } @keyframes peSway{ 0%,100%{ transform:rotate(-2.5deg) translateY(0) } 50%{ transform:rotate(2.5deg) translateY(-2px) } } @keyframes pePulse{ 0%,100%{ box-shadow:0 0 0 3px rgba(240,166,58,.22) } 50%{ box-shadow:0 0 0 5px rgba(240,166,58,.42) } } /* B 方案序列帧循环播放时，关掉卡片 CSS 呼吸，避免与换帧叠加（锁定剪影保留摇曳） */ .gz-veil.seq-on .pe-cell:not(.lock-pet) .pe-c-i img{ animation:none !important } .pe-tip{ font-size:11px; color:#8a6530; margin-top:6px; text-align:center; line-height:1.5 } .pet-golink{ color:#c07a10; font-weight:900; cursor:pointer; text-decoration:underline dotted } @media (max-width:820px){ .pet-card.wide{ max-width:94vw } } @media (max-width:640px){ .pe-equip{ grid-template-columns:1fr } } /* —— 装备页 v2：成熟 RPG 布局（槽位夹持角色 + 信息栏 + 形态进化卡）—— */ .pe-equip{ grid-template-columns:52% 1fr } .pe-left{ padding:0; overflow:hidden; display:flex; flex-direction:column } .pe-stage{ height:min(468px,calc(var(--gz-vh,1vh)*52)); border:0; border-radius:0; flex:1; background:radial-gradient(ellipse at 50% 38%,#4a3820,#241a10 75%) } .pe-actions{ display:flex; gap:8px; padding:12px; background:linear-gradient(180deg,#e9c98f,#d4a96a) } .pe-act-btn{ flex:1; padding:10px 8px; border:none; border-radius:12px; background:linear-gradient(180deg,#ffd66b,#f2a65a); color:#6b3d08; font-size:13px; font-weight:800; cursor:pointer; box-shadow:0 3px 0 rgba(120,70,20,.4); transition:transform .1s } .pe-act-btn:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(120,70,20,.4) } /* 调试模式网格 */ .debug-grid{ position:absolute; inset:0; pointer-events:none; z-index:99 } .debug-grid::before,.debug-grid::after{ content:''; position:absolute; background:rgba(0,160,255,.3) } .debug-grid::before{ left:0; right:0; top:50%; height:1px } .debug-grid::after{ top:0; bottom:0; left:50%; width:1px } .debug-on .pgear{ cursor:move !important; outline:2px dashed #00a0ff !important; pointer-events:auto !important } /* 调试面板 */ .debug-panel{ background:#1a140c; border:2px solid #5a4418; border-radius:10px; padding:12px; margin:10px; color:#a0e0a0; font-size:12px; font-family:monospace } .dbg-title{ font-size:14px; color:#ffd060; margin-bottom:10px; font-family:"Microsoft YaHei" } .dbg-row{ display:flex; align-items:center; gap:8px; margin-bottom:8px } .dbg-row label{ width:40px; color:#d0b080 } .dbg-row input{ flex:1 } .dbg-row span{ width:40px; text-align:right } .dbg-btns{ display:flex; gap:8px; margin-top:10px } .dbg-btns button{ flex:1; padding:6px; border:none; border-radius:6px; background:#2a6a3a; color:#fff; cursor:pointer; font-size:12px } .pe2-rays{ position:absolute; left:50%; top:50%; width:400px; height:400px; transform:translate(-50%,-50%); border-radius:50%; pointer-events:none; background:repeating-conic-gradient(from 0deg, rgba(255,214,120,.34) 0deg 11deg, rgba(255,214,120,0) 11deg 30deg); -webkit-mask-image:radial-gradient(circle, #000 0%, transparent 68%); mask-image:radial-gradient(circle, #000 0%, transparent 68%); animation:pe2spin 16s linear infinite } @keyframes pe2spin{ to{ transform:translate(-50%,-50%) rotate(360deg) } } .pe2-platform{ position:absolute; left:50%; bottom:10px; transform:translateX(-50%); width:272px; height:52px; border-radius:50%; background:linear-gradient(180deg,#e2cba0,#b08c58); box-shadow:inset 0 3px 5px rgba(255,244,214,.9), inset 0 -4px 6px rgba(120,85,40,.35), 0 4px 0 rgba(120,85,40,.28) } .pe2-platform::after{ content:''; position:absolute; left:50%; top:5px; transform:translateX(-50%); width:82%; height:15px; border-radius:50%; background:linear-gradient(180deg,#f2e2bd,#d9bd8c) } .pe-stage .pet-ava{ width:min(74%, 262px); height:auto; aspect-ratio:178/234; bottom:28px } /* 装扮舞台浮动组：身体 + 前后饰品层包进同一容器，三者同频飘（饰品层原是 .pet-ava 的兄弟节点，身体飘饰品不飘）。 pm-layer 是 inset:0 绝对定位、.pet-ava 是 bottom 定位，包进同样 inset:0 的容器后几何不变。 */ .pe-float{ position:absolute; inset:0; animation:pdIdle 2.6s ease-in-out infinite; transform-origin:50% 88% } .pe-float .pet-ava{ animation:none } /* 漂浮由外层统一承担，盒套盒会双重漂浮 */ .pe-socket{ width:60px; height:60px; border-radius:14px; border:3px solid #6a3f16; background:linear-gradient(180deg,#8a5a28,#5f3a14); box-shadow:inset 0 0 0 2.5px #c89a55, inset 0 3px 8px rgba(0,0,0,.35), 0 3px 0 rgba(70,40,10,.45) } .pe-socket .pe-plus{ color:#e8cf9e } .pe-socket .pe-sl-nm{ color:#ffe9c0; background:rgba(80,48,12,.8); border-radius:8px; padding:1px 7px; bottom:-17px } .pe-socket.on{ border-color:#3a2108; background:linear-gradient(180deg,#a06a2e,#7a4a1a); box-shadow:inset 0 0 0 2.5px #ffd98a, 0 0 16px rgba(255,190,80,.6), 0 3px 0 rgba(70,40,10,.45) } .pe2-s1{ top:10px; left:10px } .pe2-s2{ top:112px; left:8px } .pe2-s3{ top:214px; left:12px } .pe2-s4{ top:64px; right:10px } .pe2-s5{ top:168px; right:10px } .pe-right{ display:flex; flex-direction:column } .pe2-hd{ display:flex; align-items:center; gap:8px; flex-wrap:wrap } .pe2-nm{ font-size:17px; font-weight:900; color:#4a3010 } .pe2-streak{ font-size:11px; font-weight:900; color:#b06a10; background:#fff3d2; border:1.5px solid #e8c07a; border-radius:999px; padding:2px 8px } .pe2-badge{ display:inline-flex; align-items:center; gap:5px; align-self:flex-start; margin-top:6px; font-size:12px; font-weight:900; color:#4a2f08; background:linear-gradient(180deg,#ffe9b8,#f5cf8a); border:2px solid #d9a44e; border-radius:999px; padding:3px 12px } .pe2-chips{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:6px } .pe2-chip{ background:#fffaf0; border:2px solid rgba(122,84,36,.42); border-radius:12px; text-align:center; padding:5px 2px 4px } .pe2-chip .ic{ font-size:15px; line-height:1 } .pe2-chip b{ display:block; font-size:12px; color:#4a3010; margin-top:1px } .pe2-chip .lb{ font-size:9.5px; color:#9a8a6a } .pe2-forms{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:6px } .pe2-fc{ position:relative; border:2.5px solid #8a5a28; border-radius:12px; cursor:pointer; font-family:inherit; padding:4px 3px 3px; background:linear-gradient(180deg,#fffaf0,#f3e3bd); text-align:center; transition:transform .12s } .pe2-fc:hover{ transform:translateY(-2px) } .pe2-fc img{ width:100%; height:46px; object-fit:contain } .pe2-fc .nm{ display:block; font-size:10.5px; font-weight:900; color:#4a3010 } .pe2-fc.cur{ border-color:#e0921a; box-shadow:0 0 0 3px rgba(240,166,58,.3) } .pe2-fc.lock{ filter:grayscale(1); opacity:.62 } .pe2-fc .lk{ position:absolute; left:50%; top:38%; transform:translate(-50%,-50%); font-size:11px; font-weight:900; color:#fff; background:rgba(60,35,8,.8); border-radius:8px; padding:2px 7px; white-space:nowrap } .pe-grid{ grid-template-columns:repeat(4,1fr); margin-top:6px } .pe-cell{ padding:6px 2px 4px; border-radius:10px } .pe-cell .pe-c-i{ width:62px; height:62px; font-size:38px } .pe-cell .pe-c-n{ font-size:10.5px } .pe-cell .pe-c-d{ font-size:9px } @media (max-width:640px){ .pe-equip{ grid-template-columns:1fr } .pe-stage{ height:300px; flex:none } .pe-stage .pet-ava{ width:min(58%, 196px); bottom:22px } .pe2-platform{ width:210px; height:42px } } /* —— 装备页 v3：深夜森林工坊皮肤（弹窗整体切换暗色游戏 UI）—— */ .pet-card.game{ background:linear-gradient(180deg,#241708 0%, #1a1008 100%); border:3px solid #6a4a24; box-shadow:0 0 0 2px #120b05, 0 0 0 4px rgba(200,154,85,.35), 0 18px 44px rgba(0,0,0,.55) } .pet-card.game h3{ color:#ffe9c0; letter-spacing:2px } .pet-card.game .gz-x{ background:#3a2a16; color:#e8cf9e; border:1.5px solid #6a4a24 } .pet-card.game .pet-tabs button{ background:#2b1d10; border-color:#6a4a24; color:#c9a76a } .pet-card.game .pet-tabs button.on{ background:linear-gradient(180deg,#e8b25a,#c9871e); color:#2a1804; border-color:#e0921a } /* 舞台：夜幕 + 聚光 + 暗角 */ .pet-card.game .pe-left{ border-color:#6a4a24; background:#1d1207 } .pet-card.game .pe-right{ border-color:#6a4a24; background:linear-gradient(180deg,#241708,#1d1207); box-shadow:inset 0 0 0 2px rgba(200,154,85,.14), inset 0 0 26px rgba(0,0,0,.45) } .pet-card.game .pe-stage{ background: radial-gradient(circle at 50% 72%, rgba(255,196,90,.32), rgba(255,196,90,0) 46%), radial-gradient(circle at 50% 38%, rgba(150,110,50,.25), rgba(0,0,0,0) 72%), linear-gradient(180deg,#2a1c0e 0%, #20150a 55%, #150d05 100%); box-shadow:inset 0 0 70px rgba(0,0,0,.78), inset 0 0 0 2px rgba(200,154,85,.22) } .pet-card.game .pe2-rays{ opacity:.85 } .pet-card.game .pe2-platform{ background:linear-gradient(180deg,#8a7248,#5c4626); box-shadow:inset 0 3px 5px rgba(255,230,170,.55), inset 0 -4px 8px rgba(0,0,0,.5), 0 4px 10px rgba(0,0,0,.5) } .pet-card.game .pe2-platform::after{ background:linear-gradient(180deg,#b89a68,#8a7248) } /* 萤火虫 */ .pe2-fl{ position:absolute; width:6px; height:6px; border-radius:50%; background:#ffe9a8; box-shadow:0 0 8px 3px rgba(255,220,120,.75); opacity:0; pointer-events:none; animation:pe2fly 7s ease-in-out infinite } .pe2-fl.f1{ left:18%; top:58%; animation-delay:0s } .pe2-fl.f2{ left:78%; top:38%; animation-delay:2.2s; width:4px; height:4px } .pe2-fl.f3{ left:64%; top:76%; animation-delay:4.1s; width:5px; height:5px } @keyframes pe2fly{ 0%,100%{ transform:translate(0,0); opacity:0 } 25%{ opacity:.95 } 50%{ transform:translate(16px,-24px); opacity:.45 } 75%{ opacity:.9 } } /* 槽位：暗色嵌金 */ .pet-card.game .pe-socket{ border-color:#120b05; background:linear-gradient(180deg,#3a2a16,#241708); box-shadow:inset 0 0 0 2.5px #a8813f, inset 0 3px 8px rgba(0,0,0,.6), 0 3px 0 rgba(0,0,0,.5) } .pet-card.game .pe-socket.on{ box-shadow:inset 0 0 0 2.5px #ffd98a, 0 0 18px rgba(255,190,80,.65), 0 3px 0 rgba(0,0,0,.5) } .pet-card.game .pe-socket .pe-plus{ color:#8a6a35 } .pet-card.game .pe-socket .pe-sl-nm{ background:rgba(0,0,0,.6); color:#ffd98a } /* 右栏信息：暗底金字 */ .pet-card.game .pe2-nm{ color:#ffe9c0 } .pet-card.game .pe2-streak{ background:rgba(255,220,140,.08); border-color:#6a4a24; color:#e8c07a } .pet-card.game .pe2-badge{ background:linear-gradient(180deg,#4a3315,#3a250e); border-color:#a8813f; color:#ffd98a } .pet-card.game .pe2-chip{ background:#322312; border-color:#55401f } .pet-card.game .pe2-chip b{ color:#ffd98a } .pet-card.game .pe2-chip .lb{ color:#a8895e } /* 形态卡 / 背包：暗色 + 金色高亮 */ .pet-card.game .pe2-fc{ background:linear-gradient(180deg,#3a2a16,#2b1d10); border-color:#6a4a24 } .pet-card.game .pe2-fc .nm{ color:#e8cf9e } .pet-card.game .pe2-fc.cur{ border-color:#e0921a; box-shadow:0 0 0 2px rgba(240,166,58,.35), 0 0 14px rgba(255,180,60,.35) } .pet-card.game .pe2-fc .lk{ background:rgba(0,0,0,.72); color:#ffd98a } .pet-card.game .pe-cell{ background:linear-gradient(180deg,#3a2a16,#2b1d10); border-color:#55401f } .pet-card.game .pe-cell .pe-c-i{ background:radial-gradient(circle at 50% 36%, #fdf3da 0%, #f0deb4 62%, #dcc48e 100%); box-shadow:inset 0 -4px 7px rgba(90,55,10,.32), inset 0 2px 5px rgba(255,255,255,.85), 0 0 0 2px #7a5c2e, 0 2px 5px rgba(0,0,0,.5) } .pet-card.game .pe-cell.locked .pe-c-i{ background:radial-gradient(circle at 50% 36%, #d9d2c2, #b7ab8e); box-shadow:inset 0 -4px 7px rgba(60,40,10,.3), 0 0 0 2px #5a4522 } .pet-card.game .pe-cell .pe-c-n{ color:#e8cf9e } .pet-card.game .pe-cell .pe-c-d{ color:#a8895e } .pet-card.game .pe-cell.equipped{ border-color:#e0921a; background:linear-gradient(180deg,#4a3315,#3a250e); box-shadow:0 0 0 2px rgba(240,166,58,.35), 0 0 12px rgba(255,180,60,.3) } .pet-card.game .pe-tip{ color:#a8895e } /* —— 暗色皮肤统一扩展：状态/技能/成就/房间四个 tab 的共享组件与装扮页同一视觉语言， 消除「5 个按钮功能界面风格都不一样」的割裂感（同一卡面/边框/文字/高亮体系） —— */ .pet-card.game .pet-ava{ background:radial-gradient(circle at 50% 72%, rgba(255,196,90,.30), rgba(255,196,90,0) 74%); border-color:#55401f } .pet-card.game .pet-nm{ color:#ffe9c0 } .pet-card.game .pet-meta{ color:#a8895e } .pet-card.game .pet-golink{ color:#ffd98a } .pet-card.game .pet-stat .pst-l{ color:#c9a76a } .pet-card.game .pet-stat .pst-v{ color:#e8c07a } .pet-card.game .pet-bar{ background:#3a2a16; box-shadow:inset 0 0 0 1.5px #55401f } .pet-card.game .pet-chip-s{ background:#322312; border-color:#55401f; color:#e8c07a } .pet-card.game .pet-bubble{ background:#322312; border-color:#55401f; color:#e8cf9e } .pet-card.game .pet-note{ background:#322312; border:1.5px solid #55401f; color:#c9a76a } .pet-card.game .pet-sec{ color:#c9a76a; border-bottom:1px solid #4a3315; padding-bottom:5px } .pet-card.game .pet-grid .pet-cell{ background:linear-gradient(180deg,#3a2a16,#2b1d10); border-color:#55401f } .pet-card.game .pet-cell .pc-h{ color:#e8cf9e } .pet-card.game .pet-cell .pc-c{ color:#e8c07a } .pet-card.game .pet-cell .pc-d{ color:#a8895e } .pet-card.game .pet-cell.on{ border-color:#e0921a; background:linear-gradient(180deg,#4a3315,#3a250e); box-shadow:0 0 0 2px rgba(240,166,58,.3) } .pet-card.game .pet-cell.lock{ opacity:.6; filter:grayscale(.7) } .pet-card.game .pet-quests{ background:#322312; border-color:#55401f } .pet-card.game .pet-quest{ color:#e8cf9e } .pet-card.game .pet-quest b{ color:#ffd98a } .pet-card.game .pet-quest.ok{ color:#9fd08a } .pet-card.game .pet-quest-note{ color:#a8895e } .pet-card.game .pet-comm{ background:#322312; border-color:#a8813f } .pet-card.game .pet-comm .pc-h{ color:#e8c07a } .pet-card.game .pet-comm .pc-t{ color:#ffe9c0 } .pet-card.game .pet-comm .pc-p{ color:#a8895e } .pet-card.game .pet-comm.ok{ border-color:#7cb95c; background:linear-gradient(180deg,#2f3a1a,#26301a) } .pet-card.game .pet-comm-tip{ color:#c9a76a } .pet-card.game .pet-b{ background:linear-gradient(180deg,#e8b25a,#c9871e); color:#2a1804; box-shadow:0 3px 0 rgba(0,0,0,.5) } .pet-card.game .pet-b.blue{ background:linear-gradient(180deg,#7fa8d0,#4a7099); color:#0e2438; box-shadow:0 3px 0 #2a4a66 } .pet-card.game .pet-b.green{ background:linear-gradient(180deg,#8cc266,#5a9a3a); color:#12300a; box-shadow:0 3px 0 #356620 } .pet-card.game .pet-b.sm{ box-shadow:0 2px 0 rgba(0,0,0,.45) } .pet-card.game .pet-input{ background:#2b1d10; border-color:#6a4a24; color:#ffe9c0 } .pet-card.game .pet-input::placeholder{ color:#8a6a35 } .pet-card.game .pet-diary{ background:#2b1d10; border-color:#55401f } .pet-card.game .pd-row{ border-color:#4a3315 } .pet-card.game .pd-row .pd-d{ color:#a8895e } .pet-card.game .pd-row .pd-x{ color:#e8cf9e } .pet-card.game .pet-room{ border-color:#6a4a24; box-shadow:inset 0 0 26px rgba(0,0,0,.35) } .pet-card.game .pet-tabs{ margin-bottom:10px } @media (prefers-reduced-motion: reduce){ .pe2-fl,.pe2-rays{ animation:none !important } } /* —— 明亮暖色版游戏皮肤（.game-light）：森林系主题（forest/meadow/town）下自动启用， 保留同构布局与金色高亮语言，但底色换为奶油暖木，对 3-9 岁更友好； 远山/星空等冷暗主题继续用上面的深夜工坊暗色版 —— */ .pet-card.game-light{ background:linear-gradient(180deg,#fffaf0 0%,#fff3da 100%); border-color:#e0b56a; box-shadow:0 0 0 2px #fff, 0 0 0 4px rgba(226,169,58,.35), 0 18px 44px rgba(140,90,20,.28) } .pet-card.game-light h3{ color:#6b3d08; letter-spacing:2px } .pet-card.game-light .gz-x{ background:#f7e6bd; color:#8a6428; border-color:#e0b56a } .pet-card.game-light .pet-tabs button{ background:#fff4d6; border-color:#e0bd7a; color:#9a7434 } .pet-card.game-light .pet-tabs button.on{ background:linear-gradient(180deg,#ffd98a,#f0a63a); color:#4a3005; border-color:#f0a63a } .pet-card.game-light .pe-left{ border-color:#e0bd7a; background:#fff6e0 } .pet-card.game-light .pe-right{ border-color:#e0bd7a; background:linear-gradient(180deg,#fffaf0,#fff1d6); box-shadow:inset 0 0 0 2px rgba(200,150,60,.14), inset 0 0 26px rgba(220,170,80,.16) } .pet-card.game-light .pe-stage{ background: radial-gradient(circle at 50% 72%, rgba(255,205,110,.5), rgba(255,205,110,0) 46%), radial-gradient(circle at 50% 38%, rgba(255,235,180,.4), rgba(255,255,255,0) 72%), linear-gradient(180deg,#fff3d2 0%, #ffe9b4 55%, #f7d795 100%); box-shadow:inset 0 0 70px rgba(255,220,150,.5), inset 0 0 0 2px rgba(220,175,90,.3) } .pet-card.game-light .pe2-platform{ background:linear-gradient(180deg,#eecf8e,#d9b06a); box-shadow:inset 0 3px 5px rgba(255,255,255,.7), inset 0 -4px 8px rgba(160,110,30,.35), 0 4px 10px rgba(160,110,30,.3) } .pet-card.game-light .pe2-platform::after{ background:linear-gradient(180deg,#fbe4ae,#eecf8e) } .pet-card.game-light .pe2-fl{ background:#ffdf7a; box-shadow:0 0 8px 3px rgba(255,210,110,.8) } .pet-card.game-light .pe-socket{ border-color:#e8d0a0; background:linear-gradient(180deg,#fff2d0,#ffe9b8); box-shadow:inset 0 0 0 2.5px #d9ab5e, inset 0 3px 8px rgba(160,110,30,.22), 0 3px 0 rgba(160,110,30,.18) } .pet-card.game-light .pe-socket.on{ box-shadow:inset 0 0 0 2.5px #f0a63a, 0 0 18px rgba(255,180,60,.55), 0 3px 0 rgba(160,110,30,.18) } .pet-card.game-light .pe-socket .pe-plus{ color:#c99a4a } .pet-card.game-light .pe-socket .pe-sl-nm{ background:rgba(120,80,20,.72); color:#fff3d2 } .pet-card.game-light .pe2-nm{ color:#6b3d08 } .pet-card.game-light .pe2-streak{ background:rgba(240,166,58,.1); border-color:#e0bd7a; color:#a5711e } .pet-card.game-light .pe2-badge{ background:linear-gradient(180deg,#ffe9b8,#ffd98a); border-color:#d9a24a; color:#8a5a08 } .pet-card.game-light .pe2-chip{ background:#fff4d6; border-color:#e5c98f } .pet-card.game-light .pe2-chip b{ color:#a5711e } .pet-card.game-light .pe2-chip .lb{ color:#a8895e } .pet-card.game-light .pe2-fc{ background:linear-gradient(180deg,#fff4d6,#ffedc2); border-color:#e0bd7a } .pet-card.game-light .pe2-fc .nm{ color:#7a5a20 } .pet-card.game-light .pe2-fc.cur{ border-color:#f0a63a; box-shadow:0 0 0 2px rgba(240,166,58,.4), 0 0 14px rgba(255,180,60,.4) } .pet-card.game-light .pe2-fc .lk{ background:rgba(120,80,20,.55); color:#fff3d2 } .pet-card.game-light .pe-cell{ background:linear-gradient(180deg,#fff8e6,#fff0d0); border-color:#e5c98f } .pet-card.game-light .pe-cell .pe-c-i{ background:radial-gradient(circle at 50% 36%, #ffffff 0%, #fff3d8 62%, #f3ddb0 100%); box-shadow:inset 0 -4px 7px rgba(160,110,30,.22), inset 0 2px 5px rgba(255,255,255,.95), 0 0 0 2px #d9b06a, 0 2px 5px rgba(160,110,30,.28) } .pet-card.game-light .pe-cell.locked .pe-c-i{ background:radial-gradient(circle at 50% 36%, #eee7d8, #d8cdb4); box-shadow:inset 0 -4px 7px rgba(120,90,40,.2), 0 0 0 2px #c2ab84 } .pet-card.game-light .pe-cell .pe-c-n{ color:#7a5a20 } .pet-card.game-light .pe-cell .pe-c-d{ color:#a8895e } .pet-card.game-light .pe-cell.equipped{ border-color:#f0a63a; background:linear-gradient(180deg,#ffe9b8,#ffd98a); box-shadow:0 0 0 2px rgba(240,166,58,.4), 0 0 12px rgba(255,180,60,.35) } .pet-card.game-light .pe-tip{ color:#a8895e } .pet-card.game-light .pet-ava{ background:radial-gradient(circle at 50% 72%, rgba(255,205,110,.45), rgba(255,205,110,0) 74%); border-color:#e5c98f } .pet-card.game-light .pet-nm{ color:#6b3d08 } .pet-card.game-light .pet-meta{ color:#9a7f52 } .pet-card.game-light .pet-golink{ color:#b07d28 } .pet-card.game-light .pet-stat .pst-l{ color:#8a6a35 } .pet-card.game-light .pet-stat .pst-v{ color:#b07d28 } .pet-card.game-light .pet-bar{ background:#f3e3ba; box-shadow:inset 0 0 0 1.5px #d9c08a } .pet-card.game-light .pet-chip-s{ background:#fff4d6; border-color:#e5c98f; color:#a5711e } .pet-card.game-light .pet-bubble{ background:#fff4d6; border-color:#e5c98f; color:#7a5a20 } .pet-card.game-light .pet-note{ background:#fff4d6; border-color:#e5c98f; color:#8a6a35 } .pet-card.game-light .pet-sec{ color:#8a6a35; border-bottom-color:#e8d5a5 } .pet-card.game-light .pet-grid .pet-cell{ background:linear-gradient(180deg,#fff8e6,#fff0d0); border-color:#e5c98f } .pet-card.game-light .pet-cell .pc-h{ color:#7a5a20 } .pet-card.game-light .pet-cell .pc-c{ color:#b07d28 } .pet-card.game-light .pet-cell .pc-d{ color:#a8895e } .pet-card.game-light .pet-cell.on{ border-color:#f0a63a; background:linear-gradient(180deg,#ffe9b8,#ffd98a); box-shadow:0 0 0 2px rgba(240,166,58,.35) } .pet-card.game-light .pet-quests{ background:#fff4d6; border-color:#e5c98f } .pet-card.game-light .pet-quest{ color:#7a5a20 } .pet-card.game-light .pet-quest b{ color:#a5711e } .pet-card.game-light .pet-quest.ok{ color:#4a8a2a } .pet-card.game-light .pet-quest-note{ color:#a8895e } .pet-card.game-light .pet-comm{ background:#fff4d6; border-color:#d9a24a } .pet-card.game-light .pet-comm .pc-h{ color:#a5711e } .pet-card.game-light .pet-comm .pc-t{ color:#6b3d08 } .pet-card.game-light .pet-comm .pc-p{ color:#a8895e } .pet-card.game-light .pet-comm.ok{ border-color:#7cb95c; background:linear-gradient(180deg,#eaf6d8,#dcf0c4) } .pet-card.game-light .pet-comm-tip{ color:#8a6a35 } .pet-card.game-light .pet-b{ background:linear-gradient(180deg,#ffd98a,#f0a63a); color:#4a3005; box-shadow:0 3px 0 rgba(150,90,20,.35) } .pet-card.game-light .pet-b.blue{ background:linear-gradient(180deg,#a8ccec,#78a6d0); color:#123048; box-shadow:0 3px 0 #4a7099 } .pet-card.game-light .pet-b.green{ background:linear-gradient(180deg,#a8d884,#78b454); color:#1c4210; box-shadow:0 3px 0 #4e8430 } .pet-card.game-light .pet-b.sm{ box-shadow:0 2px 0 rgba(150,90,20,.3) } .pet-card.game-light .pet-input{ background:#fffdf5; border-color:#e0bd7a; color:#6b3d08 } .pet-card.game-light .pet-input::placeholder{ color:#c2a877 } .pet-card.game-light .pet-diary{ background:#fffdf5; border-color:#e5c98f } .pet-card.game-light .pd-row{ border-color:#e8d5a5 } .pet-card.game-light .pd-row .pd-d{ color:#9a7f52 } .pet-card.game-light .pd-row .pd-x{ color:#8a6428 } .pet-card.game-light .pet-room{ border-color:#e0bd7a; box-shadow:inset 0 0 26px rgba(230,180,90,.22) } /* —— RPG 装备分层合成 v2（纸娃娃挂点系统：定位全部由 gz-pet.js 的 fit 配置 inline style 下发） —— */ .pet-ava>img,.pr-pet>img,.pd-body>img{ position:relative; z-index:2 } .pgear[data-slot]{ position:absolute; pointer-events:none; user-select:none; height:auto; object-fit:contain; animation:none !important; filter:drop-shadow(0 2px 2px rgba(60,40,10,.22)) } /* 饰品层绝不自动画：漂浮/动作一律由「容器」（.pet-ava/.pe-float/.pd-body）承担，层作为子节点天然同频。 2026-10-15 删掉旧的三条「层自复制 pdIdle」规则（.pet-ava/.pr-pet/.pet-home-ava 下的 .pgear-layer）—— 那是层和身体各飘各的、靠同起始帧碰运气对齐的旧方案：面板蒙对（层与 img 同帧重建）， B 线挂件则被 paintGearInto 的内联 animation:none 杀成「身体飘、饰品钉死」（用户报的 bug）。 现在只有一套机制：容器飘，层搭车。 */ .pgear-layer{ position:absolute; inset:0; pointer-events:none; z-index:3 } /* 挂件：立绘按 contain 横向留白居中，饰品层须对齐立绘实际占位（同比例、高 100%、水平居中），fit 百分比才不漂移 */ .pet-dock .pgear-layer{ left:50%; right:auto; top:0; bottom:0; height:100%; width:auto; aspect-ratio:178/234; transform:translateX(-50%) } .pet-dock .pgear-layer.back{ z-index:1 } /* 背槽饰品（书包/披风/翅膀）垫到宠物 img(z:2) 身后 */ /* back 槽 z:0（在宠物 z:2 身后）、face z:6（压眼睛）、其余 z:5，由 fit 配置下发 */ /* 蛋形态：太小，只戴头部装饰，帽子统一悬浮在蛋顶（!important 覆盖 fit） */ [data-st="egg"] .pgear:not([data-slot="head"]), .pd-body[data-stage="egg"] .pgear:not([data-slot="head"]){ display:none } /* 主页「我的宠物」卡片迷你容器：与 .pet-ava 同宽高比（178/234），fit 百分比坐标系完全一致； 漂浮挂容器——img 与饰品层都是子节点，同频（旧规则把 pdIdle 同时挂 img 和层，已统一到容器） */ .pet-home-ava{ position:relative; width:110px; aspect-ratio:178/234; flex:none; animation:pdIdle 2.6s ease-in-out infinite; transform-origin:50% 88% } .pet-home-ava>img{ width:100%; height:100%; object-fit:contain; display:block; position:relative; z-index:2 } [data-st="egg"] .pgear[data-slot="head"], .pd-body[data-stage="egg"] .pgear[data-slot="head"]{ left:50% !important; top:-8% !important; width:36% !important; transform:translateX(-50%) !important } .pw-img{ width:100%; height:100%; object-fit:contain; display:block } @media (prefers-reduced-motion: reduce){ .pet-dock .pd-body,.pet-dock .pd-shadow,.pet-ava,.pe-float,.pet-home-ava,.pr-item,.pr-pet img,.pet-ava::after,.lvup-pet img,.pgear-layer{ animation:none !important } } /* 营地页通用布局 */ .gz-camp-wrap,.rv-wrap{ position:relative; z-index:1 } /* 关键：内容必须浮在 body::before 深棕蒙层之上，否则整页发灰（index 的 .wrap 同理用 z-index:2） */ .gz-camp-wrap{ max-width:960px; margin:0 auto; padding:16px 14px 60px } .gz-hero{ background:linear-gradient(180deg,rgba(48,28,8,.85),rgba(48,28,8,.5)); border-radius:22px; padding:18px 20px; color:#ffe9c4; box-shadow:0 8px 24px rgba(0,0,0,.3); margin-bottom:16px } .gz-hero h1{ margin:0; font-size:22px; font-weight:900 } .gz-hero p{ margin:6px 0 0; font-size:13px; opacity:.92; line-height:1.6 } .gz-back{ display:inline-block; text-decoration:none; color:#6b3d08; background:linear-gradient(180deg,#ffd66b,#f2a65a); border-radius:999px; padding:7px 15px; font-size:13px; font-weight:900; box-shadow:0 3px 0 #c67c2e; margin-bottom:12px } .gz-note{ background:var(--gz-panel); border:2px solid var(--gz-line); border-radius:16px; padding:11px 15px; font-size:13px; color:#633806; margin-bottom:14px; line-height:1.6 } html[data-theme="yuan"] .gz-note{ color:#33406a } .gz-foot{ font-size:12px; color:#6e5c3a; background:rgba(48,28,8,.82); border-radius:16px; padding:12px 16px; color:#ffe9c4; line-height:1.7; margin-top:6px } html[data-theme="yuan"] .gz-foot{ color:#cdd6ee } /* 皮肤切换里的小预览 */ .gz-skin{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:10px 0 } .gz-skin button{ position:relative; width:calc(50% - 6px); min-width:132px; aspect-ratio:16/10; border:2px solid rgba(255,255,255,.28); border-radius:22px; padding:0; overflow:hidden; cursor:pointer; font-family:inherit; background:#252238; text-align:left; color:#fff; transition:transform .18s cubic-bezier(.34,1.56,.64,1),border-color .18s ease,box-shadow .18s ease } .gz-skin button:hover{ transform:translateY(-5px) scale(1.01); box-shadow:0 16px 34px rgba(0,0,0,.24) } .gz-skin button:active{ transform:translateY(-2px) scale(.99) } .gz-skin button.on{ border-color:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.45), 0 12px 32px rgba(0,0,0,.3) } .gz-skin button.on::after{ content:'✓'; position:absolute; right:12px; bottom:12px; z-index:4; width:30px; height:30px; display:flex; align-items:center; justify-content:center; background:#fff; color:var(--gz-accent); border-radius:50%; font-size:16px; font-weight:900; box-shadow:0 3px 10px rgba(0,0,0,.25) } .gz-skin .pv{ position:absolute; inset:0; display:flex; flex-direction:column } .gz-skin .pv-color{ position:relative; height:50%; background-size:cover; background-position:center; transition:filter .15s ease } /* 上半配色：与下半等高 50/50（2026-10-17 用户拍板，背景按钮不再拉大拉高） */ .gz-skin .pv-color:hover{ filter:brightness(1.08) } .gz-skin .pv-color::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:rgba(255,255,255,.35) } .gz-skin .pv-color .hint{ position:absolute; top:7px; left:8px; z-index:2; font-size:9px; font-weight:900; color:rgba(255,255,255,.95); background:rgba(0,0,0,.28); padding:2px 8px; border-radius:999px; letter-spacing:.3px; backdrop-filter:blur(5px); border:1px solid rgba(255,255,255,.12) } .gz-skin .pv-bg{ position:relative; flex:1; background-size:cover; background-position:center; display:flex; flex-direction:column; justify-content:flex-end; transition:filter .15s ease } .gz-skin .pv-bg:hover{ filter:brightness(1.05) } .gz-skin .pv-bg::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 8%,rgba(0,0,0,.28) 52%,rgba(0,0,0,.7)); pointer-events:none } .gz-skin .meta{ position:relative; z-index:2; padding:12px 14px 14px } .gz-skin .nm{ font-weight:900; font-size:15px; line-height:1.25; text-shadow:0 1px 5px rgba(0,0,0,.55) } .gz-skin .ds{ font-size:10.5px; opacity:.88; margin-top:2px; line-height:1.45; text-shadow:0 1px 3px rgba(0,0,0,.5) } .gz-skin .rec{ position:absolute; top:9px; left:9px; z-index:3; background:rgba(0,0,0,.28); color:#fff; font-size:9px; font-weight:800; padding:2px 8px; border-radius:999px; letter-spacing:.4px; backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.15) } .gz-skin .rec.rec-w{ background:rgba(255,255,255,.78); color:#4a3500; border-color:rgba(255,255,255,.5) } @media (max-width:420px){ .gz-skin button{ width:100%; aspect-ratio:16/9 } } /* —— 伙伴房间 · 移植格物学园家园（2026-10-17）—— 1600×900 虚拟舞台：底图/背景家具/玩家家具/宠物全部按舞台百分比定位，窗口任何尺寸都不变形。 上下结构（2026-10-17 用户反馈）：舞台通栏放大置顶（房间是主角），氛围/伙伴皮肤/家具全部移到下方； 舞台必须严格 16:9（坐标=舞台百分比），高度用宽度上限封顶（calc(var(--gz-vh,1vh)*46)），居中不变形。 */ .pr-wrap{ display:grid; grid-template-columns:1fr; gap:12px; align-items:start; margin-top:10px } .pet-room.pr16{ height:auto; aspect-ratio:16/9; margin-top:0; width:min(100%, calc(calc(var(--gz-vh,1vh)*46) * 16 / 9)); margin-inline:auto } .pr-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; z-index:0 } .pr-ov{ position:absolute; display:block; z-index:1; pointer-events:none; user-select:none; -webkit-user-drag:none } .pr-say{ position:absolute; z-index:6; transform:translate(-50%,-100%); background:#fff; border:2px solid rgba(160,120,60,.35); border-radius:14px 14px 4px 14px; padding:6px 10px; font-size:12.5px; font-weight:800; color:#4a3010; white-space:nowrap; max-width:78%; overflow:hidden; text-overflow:ellipsis; box-shadow:0 6px 16px rgba(0,0,0,.18); animation:pdPop .3s ease-out; pointer-events:none } .pr-side{ min-width:0 } .pr-side .pet-sec:first-child{ margin-top:0 } .pr-side .pet-grid{ grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:6px; margin-top:6px } .pet-card .pr-side .pet-grid{ grid-template-columns:repeat(auto-fill,minmax(190px,1fr)) } /* 压过 .pet-card.wide .pet-grid 的 auto-fill；上下结构后家具通栏，列数随宽度自动加密 */ .pr-side .pet-cell{ display:flex; align-items:center; padding:6px 9px; border-radius:11px } .pr-side .pet-cell .pc-h{ flex:1; font-size:12px; gap:5px } .pr-side .pet-cell .pc-d{ display:none } /* 细节走悬停 title，压成一屏 */ .pr-side .pet-cell .pc-iimg img{ width:22px; height:22px } @media (max-width:700px){ .pr-side .pet-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) } } @media (max-height:760px){ .gz-veil{ padding:10px } .gz-card{ padding:12px 14px } .gz-card h3{ font-size:16px; margin-bottom:6px } .pet-card .pet-ava{ width:104px } .pet-card .pet-ava>img:not(.pgear){ max-width:104px !important; max-height:137px !important } /* 压内联 130×171 立绘（object-fit:contain 不变形） */ .pet-top{ gap:10px } .pet-tabs{ margin-bottom:8px } .pet-tabs button{ padding:5px 10px } .pet-nm{ font-size:15px } .pet-meta{ margin-top:3px; font-size:11.5px } .pet-stat{ margin-top:4px } .pet-stat .pst-l{ width:28px; font-size:10.5px } .pet-stat .pst-v{ font-size:10px; min-width:46px } .pet-chips2{ margin-top:6px; gap:4px } .pet-chip-s{ font-size:10.5px; padding:3px 8px } .pet-legend-hint{ padding:4px 7px; margin-top:6px; font-size:10.5px } .pet-grow-note{ padding:5px 9px; font-size:10.5px; margin-top:6px; line-height:1.5 } .pet-bubble{ padding:6px 10px; font-size:12px; line-height:1.45 } .pet-b{ padding:7px 8px; font-size:12.5px; min-width:88px } .pet-input{ padding:6px 10px; font-size:12px; margin-top:8px } .pet-quests{ padding:6px 9px; margin-top:6px } .pet-quest{ line-height:1.6; font-size:11.5px } .pet-quest-note{ margin-top:3px; font-size:10.5px } .pet-sec{ margin:7px 0 4px; font-size:11px } .pet-comm{ padding:5px 9px; margin:4px 0 } .pet-comm .pc-h{ font-size:10.5px } .pet-comm .pc-t{ font-size:12px; margin:2px 0 4px } .pet-comm .pc-p{ font-size:10.5px; margin-top:3px } .pet-comm-tip{ margin-top:4px; font-size:11px } } /* 矮屏逻辑分辨率档（≤560 逻辑高：平板 960×540 横屏等）——在 760 档基础上再压约 100px： 左栏压立绘/按钮/成长寄语，右栏压任务行距与委托卡内距；目标双栏 ≤ ~424px 全部一屏放下。 */ @media (max-height:560px){ .pet-card.tab-state{ max-height:min(880px,100%) } .gz-card h3{ font-size:14.5px; margin-bottom:4px } .pet-tabs{ margin-bottom:6px } .pet-tabs button{ padding:4px 8px; font-size:12px } .pet-card .pet-ava{ width:84px } .pet-card .pet-ava>img:not(.pgear){ max-width:84px !important; max-height:111px !important } .pet-top{ gap:8px } .pet-nm{ font-size:13.5px } .pet-lv{ font-size:10.5px; padding:1px 7px } .pet-meta{ font-size:10.5px; margin-top:2px } .pet-stat{ margin-top:3px } .pet-stat .pst-l{ width:26px; font-size:10px } .pet-stat .pst-v{ font-size:9.5px; min-width:42px } .pet-chips2{ margin-top:4px; gap:3px } .pet-chip-s{ font-size:9.5px; padding:2px 6px } .pet-grow-note{ font-size:9.5px; padding:4px 7px; margin-top:4px; line-height:1.4 } .pet-awaken-note{ display:none } /* 觉醒说明文案让位给按钮（按钮自身含义完整） */ .pet-bubble{ margin-top:6px; padding:4px 8px; font-size:11px; line-height:1.4 } .pet-state2 .pet-row{ margin-top:6px } .pet-b{ padding:5px 7px; font-size:11.5px; min-width:66px; border-radius:11px } .pet-input{ margin-top:6px; padding:4px 8px; font-size:11px } /* 右栏：任务 + 委托 */ .pet-quests{ padding:4px 7px; margin-top:5px } .pet-quest{ line-height:1.45; font-size:10.5px } .pet-quest-note{ font-size:9.5px; margin-top:2px } .pet-sec{ margin:4px 0 2px; font-size:10px } .pet-comm{ padding:3px 8px; margin:3px 0 } .pet-comm.slim{ padding:3px 8px; margin:3px 0; gap:6px } .pet-comm.slim .pc-h{ font-size:9.5px } .pet-comm.slim .pet-bar{ height:6px } .pet-comm.slim .pc-p{ font-size:9.5px; min-width:30px } .pet-comm.cslim{ padding:3px 8px; margin:3px 0; column-gap:6px; row-gap:2px } .pet-comm.cslim .pc-h{ font-size:9.5px } .pet-comm.cslim .pc-t{ font-size:11px } .pet-comm.cslim .pc-p{ font-size:9.5px } .pet-comm.cslim .pet-bar{ height:6px } .pet-comm-tip{ font-size:9.5px; margin-top:2px } } /* —— 房间页签紧凑档（放在同权重媒体档之后，确保压过基础规则）—— */ @media (max-height:760px){ .pr-wrap{ gap:12px; margin-top:8px } .pr-side .pet-sec{ margin:5px 0 3px } .pr-side .pet-chip{ padding:4px 9px; font-size:11.5px } .pr-side .pet-cell{ padding:4px 8px } .pr-side .pet-cell .pc-h{ font-size:11.5px; gap:4px } .pr-side .pet-cell .pc-iimg img{ width:20px; height:20px } } @media (max-height:560px){ .pet-card.wide .pr-side .pet-grid{ grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:5px } .pr-side .pet-chip small{ display:none } /* 解锁条件让位（悬停 title 仍可查），chips 压回一行 */ .pr-side .pet-sec{ margin:4px 0 2px; font-size:10.5px } .pr-side .pet-chip{ padding:3px 7px; font-size:10.5px } .pr-side .pet-cell{ padding:3px 6px; border-radius:9px } .pr-side .pet-cell .pc-h{ font-size:10.5px } .pr-side .pet-cell .pc-c{ display:none } /* 3 列偏窄：状态文字让位给名字，状态看灰度/边框+悬停 title */ .pr-side .pet-cell .pc-iimg img{ width:17px; height:17px } .pet-note{ font-size:10.5px; padding:5px 9px; margin-top:6px; line-height:1.45 } } /* ===== 思维教练按钮「入坞」态（gz-core.js dockCoachToggle 自动添加） ===== 取消 fixed 悬浮定位，融入页面底部按钮行，随 flex 换行，永不遮挡统计信息 */ #gzCoachToggle.gzc-docked{ position:static!important; left:auto!important; right:auto!important; bottom:auto!important; transform:none!important; margin:0; flex:none; display:inline-flex; align-items:center; box-shadow:0 3px 0 #7fae3d,0 5px 10px rgba(60,90,20,.18)!important } #gzCoachToggle.gzc-docked:active{ transform:translateY(2px) scale(.97)!important } /* ============ 去低幼化：4-6 年级「成熟模式」 ============ 仅作用于共享内核 UI（不侵入机器内部样式），配合 5-6 年级默认「远山学园」皮， 把最糖果化的投影/圆角收敛成更克制、更"大孩子"的观感。 */ body.gzb-mature #gzTypeBadge{ border-radius:8px; padding:4px 10px; font-size:12px; box-shadow:0 2px 8px rgba(40,30,10,.16) } body.gzb-mature #gzCoreBar .gzbtn{ border-radius:10px; box-shadow:0 2px 0 rgba(80,50,15,.3) } body.gzb-mature .gz-veil .gz-card{ border-radius:18px; box-shadow:0 14px 40px rgba(20,15,5,.32) } body.gzb-mature #gzDoneBar{ border-radius:12px; box-shadow:0 8px 24px rgba(40,30,10,.2) } body.gzb-mature #gzPetBobStyle{ animation:none } /* ============ 智能难度托管态：机器自带难度条进入"自动"时视觉弱化 ============ */ #gzDiffBar.gz-auto{ opacity:.55; transition:opacity .25s } #gzDiffBar.gz-auto button{ cursor:not-allowed } #gzDiffBar.gz-auto::after{ content:'🤖自动'; position:absolute; top:-9px; right:6px; font:700 10px/1 inherit; color:#fff; background:#5b7cfa; padding:2px 6px; border-radius:8px; box-shadow:0 2px 6px rgba(40,40,120,.3) } /* ============ 统一读题小喇叭：自动内嵌到第一个 .qcard 右上角 ============ */ .q-speaker{ position:absolute; right:10px; top:10px; z-index:5; width:34px; height:34px; border-radius:50%; border:2px solid #e8c98f; background:linear-gradient(180deg,#fff3d2,#ffe2b0); color:#a3540a; font-size:16px; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 3px 8px rgba(160,95,25,.2); transition:transform .15s, box-shadow .15s; pointer-events:auto } .q-speaker:active{ transform:scale(.9); box-shadow:0 1px 4px rgba(160,95,25,.2) } @media (max-width:480px){ .q-speaker{ width:30px; height:30px; font-size:14px; right:8px; top:8px } } /* ============ 宠物成就庆祝浮层（不依赖桌面 dock，index/机器页通用） ============ */ .gz-pet-celebrate{ position:fixed; left:50%; top:38%; transform:translate(-50%,-30%) scale(.7); z-index:9999; pointer-events:none; opacity:0; transition:opacity .35s, transform .45s cubic-bezier(.22,1.3,.5,1); display:flex; flex-direction:column; align-items:center; gap:6px } .gz-pet-celebrate.on{ opacity:1; transform:translate(-50%,-50%) scale(1) } .gz-pet-celebrate .gz-pc-pet{ width:108px; height:108px; display:flex; align-items:center; justify-content:center; animation:gzpcBob 1.1s ease-in-out infinite } .gz-pet-celebrate .gz-pc-pet img{ width:96px; height:96px; object-fit:contain; filter:drop-shadow(0 12px 8px rgba(120,70,10,.2)) } .gz-pet-celebrate .gz-pc-txt{ font:800 16px/1.4 inherit; color:#7a3d07; background:rgba(255,250,235,.92); padding:6px 14px; border-radius:14px; box-shadow:0 6px 18px rgba(160,95,25,.25); white-space:nowrap } @keyframes gzpcBob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}} .gz-pet-celebrate .lvup-cf{ position:absolute; top:-10px; font-size:22px; animation:gzpcFall 1.4s ease-in forwards } @keyframes gzpcFall{0%{transform:translateY(-20px) scale(.6); opacity:0}20%{opacity:1}100%{transform:translateY(120px) scale(1); opacity:0}} @media (max-width:480px){ .gz-pet-celebrate .gz-pc-pet{ width:84px; height:84px } .gz-pet-celebrate .gz-pc-pet img{ width:68px; height:68px } } /* ===== P2-1 觉醒突破 + P2-2 传说专属帧（2026-10-11）===== */ .pet-b.gold, .pet-card.game .pet-b.gold{ background:linear-gradient(180deg,#ffe9a8,#ffcf5a); color:#6a4500; box-shadow:0 3px 0 #b8860b; border:1px solid rgba(255,220,120,.85) } .pet-card.game-light .pet-b.gold{ background:linear-gradient(180deg,#fff3c4,#ffd764); color:#6a4500; box-shadow:0 3px 0 rgba(184,134,11,.55) } .pet-b.gold:active{ transform:translateY(2px) } .pet-cycle-t{ color:#ffb84e; text-shadow:0 0 6px rgba(255,190,60,.45) } .pet-card.game-light .pet-cycle-t{ color:#c8860a; text-shadow:none } .pet-awaken{ margin-top:8px } .pet-awaken-note{ font-size:11px; color:#d9b877; margin-top:5px; line-height:1.55 } .pet-card.game-light .pet-awaken-note{ color:#8a6a2f } @keyframes legendFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } } .pet-ava img.legend-float{ animation:legendFloat 3.4s ease-in-out infinite } .gz-veil.seq-on .pe-cell .pe-c-i img.legend-float{ animation:legendFloat 3.4s ease-in-out infinite !important } /* ===== P3 家具/房间主题/伙伴皮肤（2026-10-11 下午）===== */ .pr-wall.has-img{ background-size:cover; background-position:center top } .pet-room .pr-item{ line-height:0 } .pet-room .pr-item img{ width:100%; height:auto; object-fit:contain; display:block; pointer-events:none; filter:drop-shadow(0 3px 4px rgba(40,20,0,.28)) } .pet-room .pr-item.lim img{ width:112%; filter:drop-shadow(0 0 6px rgba(255,200,90,.75)) drop-shadow(0 3px 4px rgba(40,20,0,.28)) } .pr-lim{ position:absolute; right:-8px; top:-8px; font-style:normal; font-size:10px; font-weight:900; color:#fff; background:linear-gradient(180deg,#ff9a3a,#e2611c); border-radius:8px; padding:1px 5px; line-height:1.4; box-shadow:0 1px 3px rgba(0,0,0,.3) } .pet-card.game-light .pr-lim{ box-shadow:none } .pet-iimg, .pc-iimg{ line-height:0 } .pc-iimg img{ width:24px; height:24px; object-fit:contain; vertical-align:-6px } .pc-lim{ font-size:9.5px; font-weight:900; color:#fff; background:linear-gradient(180deg,#ff9a3a,#e2611c); border-radius:7px; padding:1px 5px; margin-left:4px; flex:none } .pet-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px } .pet-chip{ border:2px solid rgba(160,120,60,.35); background:#fffdf6; color:#5a4018; border-radius:999px; padding:5px 12px; font-size:12px; font-weight:800; cursor:pointer; transition:transform .12s ease } .pet-chip:active{ transform:scale(.94) } .pet-chip small{ font-weight:700; color:#a08050; font-size:10.5px } .pet-chip.on{ background:linear-gradient(180deg,#ffe9a8,#ffcf5a); border-color:#e0a52a; color:#6a4500; box-shadow:0 2px 0 #b8860b } .pet-chip.lock{ opacity:.62; filter:grayscale(.65) } .pet-card.game .pet-chip{ background:linear-gradient(180deg,#3a2a16,#2b1d10); border-color:#55401f; color:#e8cf9e } .pet-card.game .pet-chip small{ color:#a8895e } .pet-card.game .pet-chip.on{ background:linear-gradient(180deg,#4a3315,#6a4a18); border-color:#e0921a; color:#ffe1a0 } .pet-card.game-light .pet-chip{ background:#fff8e6; border-color:#e5c98f; color:#7a5a20 } .pet-card.game-light .pet-chip.on{ background:linear-gradient(180deg,#ffe9b8,#ffd98a); border-color:#f0a63a; color:#6a4500 } /* ---------- 装扮工坊 Tab（👗 dress · 自由拖动摆放层） ---------- */ .pm-stage .pm-layer, .pe-stage .pm-layer{ position:absolute; inset:0; pointer-events:none; z-index:3 } .pm-stage .pm-layer.back, .pe-stage .pm-layer.back{ z-index:1 } /* 背部道具（翅膀/书包）：垫在宠物身后 */ .pm-stage .pet-ava, .pe-stage .pet-ava{ z-index:2 } .pm-stage .pm-layer .pm-gear, .pe-stage .pm-layer .pm-gear{ pointer-events:auto } /* 防「宿主页通用类名」串味（2026-10-17）：饰品层的前后修饰类叫 .back/.front，宿主页的 「返回按钮」也常叫 .back（英语森林 = 白胶囊 / 家长报告 = 橙胶囊），同名继承到饰品层 → 舞台上出现彩色圆盘并盖住立绘（.pgear-unit 在 DOM 中排在 之后、z-index 同为 1）。 饰品层/道具是纯几何容器，着色类属性一律归零；同一份规则也在 gz-pet.js 自注入样式中。 */ .pgear-unit,.pgear-foot,.pgear-layer,.pgear,.pm-layer,.pm-gear,.pet-acc{ background:none!important; border:0!important; border-radius:0!important; padding:0!important; box-shadow:none!important; outline:0!important; min-width:0!important } /* ---------- 伙伴 + 装扮 左中右三栏（gz-pet.js tabPets） ---------- */ .pm-tri{ grid-template-columns:minmax(0,25%) minmax(0,1fr) minmax(0,25%); gap:10px; align-items:stretch } .pm-tcol{ border:2.5px solid rgba(122,84,36,.55); border-radius:16px; padding:8px 7px; background:rgba(255,250,238,.55); display:flex; flex-direction:column; min-height:0; overflow:hidden } .pm-tcol-stage{ background:none; border:none; padding:2px 0 } /* 侧栏卡片贴内容高度：网格默认 stretch 会把左(伙伴)/右(饰品)卡片拉到与中栏(舞台+提示)同高， 而 .pm-vlist 有 max-height 封顶 → 卡片底部多出一大块空白（2026-10-15 用户截图反馈）。 align-self:start 让卡片=头部+封顶列表的自然高度，空白消除；单栏堆叠(≤640px)下 auto 行同理安全。 */ .pm-tcol-pets, .pm-tcol-gear{ align-self:start } .pm-col-hd{ font-size:12.5px; font-weight:900; color:#6a4500; margin:0 0 6px; display:flex; align-items:center; gap:4px; padding-left:3px } .pm-col-hd .pm-cnt{ font-size:11px; color:#9a7a3a; font-weight:800; margin-left:auto; background:#fff3d2; border-radius:99px; padding:1px 8px; border:1px solid #e8cf9a } /* 伙伴 / 饰品列表：2 列网格（2026-10-14 用户指定）—— 原竖排单列时单元格过宽、图标只占 1/3 显得小；改 2 列后单元格宽度≈图标宽度， 图标随格子自适应（width:100% + max-width 上限），既填满格子又不过大。 */ .pm-vlist{ flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start; gap:6px; padding:6px 7px 6px 4px; scrollbar-width:thin; max-height:min(calc(var(--gz-vh,1vh)*56),520px) } .pm-vcell{ position:relative; border:2px solid rgba(122,84,36,.4); border-radius:12px; background:linear-gradient(180deg,#fffdf6,#fdf3da); cursor:pointer; font-family:inherit; padding:7px 3px 6px; display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0; transition:transform .15s ease, border-color .15s ease } .pm-vcell:hover{ transform:translateY(-2px); border-color:#e0921a } /* 图标盒：正方形容器，宽随格子自适应、上限 70px（既填满格子又不过大）。 图/emoji 绝对定位居中，不参与父盒 intrinsic 高度，保证正方形不被图片原始比例撑高撑扁。 */ .pm-vcell .pm-vi{ position:relative; width:100%; max-width:70px; height:auto; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; font-size:clamp(22px,3.2vw,30px) } .pm-vcell .pm-vi img{ position:absolute; inset:0; margin:auto; width:90%; height:90%; object-fit:contain; filter:drop-shadow(0 2px 3px rgba(60,40,10,.35)); animation:peBreath 3.4s ease-in-out infinite } .pm-vcell .pm-vn{ font-size:11.5px; font-weight:900; color:#4a3010; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .pm-vcell .pm-vd{ font-size:9.5px; color:#9a8a6a; line-height:1.2; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .pm-vcell.equipped{ border-color:#e0921a; background:linear-gradient(180deg,#fff3d2,#ffe3a4); box-shadow:0 2px 6px rgba(224,146,26,.25) } .pm-vcell.equipped::after{ content:'✓'; position:absolute; top:-5px; right:-4px; width:18px; height:18px; border-radius:50%; background:linear-gradient(180deg,#7bb32e,#4c8b14); color:#fff; font-size:10px; font-weight:900; line-height:18px; text-align:center; box-shadow:0 1px 3px rgba(0,0,0,.25) } .pm-vcell.lock-pet{ cursor:not-allowed; opacity:.85; border-style:dashed; background:#f4ecdb } .pm-vcell.lock-pet .pm-vi img.sil{ width:82%; height:82%; object-fit:contain; filter:brightness(0) opacity(.3); animation:peSway 5s ease-in-out infinite } .pm-vcell.lock-pet .pm-vn{ color:#9a8a6a } /* R-GEARNEED（2026-10-18）：饰品学习解锁锁态——右下角锁角标 + 条件行弱化 */ .pm-vcell .pm-vi .pm-lock{ position:absolute; bottom:-3px; right:-3px; font-size:14px; line-height:1; filter:drop-shadow(0 1px 2px rgba(60,40,10,.4)); pointer-events:none } .pm-vcell.lock-pet .pm-vd{ color:#a3936f } /* 中栏舞台：高度闭环（flex:none 防拉伸 + clamp 随视口自适应，须 ≥ 宠物图高度），宠物占满中栏 */ .pm-tcol-stage .pe-stage{ height:auto; flex:1 1 auto; min-height:150px; max-height:520px } .pm-tcol-stage .pe-stage .pet-ava{ width:min(300px,48%); height:auto; aspect-ratio:178/234; bottom:12px } /* 工坊舞台宠物静止：pdIdle 呼吸飘动会与固定的饰品层错位（拖摆坐标是相对静态舞台标定的） */ .pm-tcol-stage .pe-stage .pet-ava img, #pmStage .pm-base{ animation:none !important } .pm-tcol-stage .pe-stage .pet-ava::after{ animation:none !important } /* 高度档（≤760/≤560）给「状态页小头像」的 max 104/84px !important 钳制会泄漏进装扮舞台—— 910×500 实测：容器 164×213 贴底正确，但立绘 img 被压成 84×109 且顶在容器顶部 → 宠物悬空在舞台上半空、饰品挂点全错。 舞台内立绘恒铺满容器（装备挂点自适应公式以 contain 铺满为前提），须用更高优先级 !important 抵消两条钳制。 */ .pm-tcol-stage .pe-stage .pet-ava>img:not(.pgear){ max-width:none !important; max-height:none !important } .pm-tcol-stage .pe2-hd{ margin-bottom:6px } .pm-tcol-stage .pe-tip{ margin-top:8px } /* 平板竖屏 / 小窗：三栏收窄，舞台略降 */ @media (max-width:900px){ .pm-tri{ grid-template-columns:minmax(0,26%) minmax(0,1fr) minmax(0,26%); gap:7px } .pm-tcol-stage .pe-stage .pet-ava{ width:min(250px,52%) } .pm-vlist{ max-height:min(calc(var(--gz-vh,1vh)*50),460px) } } /* 手机 / 窄平板：单栏堆叠——舞台上置，伙伴与饰品转横排滑动 */ @media (max-width:640px){ .pm-tri{ grid-template-columns:minmax(0,1fr); gap:10px } .pm-tcol-stage{ order:1 } .pm-tcol-pets{ order:2 } .pm-tcol-gear{ order:3 } .pm-petlist, .pm-gearlist{ display:flex; flex-direction:row; overflow-x:auto; overflow-y:hidden; max-height:none; padding-bottom:4px } .pm-vcell{ flex:0 0 auto; width:86px } .pm-vcell .pm-vi{ width:64px; max-width:none } .pm-tcol-stage .pe-stage .pet-ava{ width:min(260px,62%) } /* 20261020 移动端触摸审计修复：立绘 absolute 不占流 → height:auto 只剩 min-height:150px， 立绘(62%宽≈196px→高257px)自底向上穿出舞台、头部连同头顶饰品被面板标题盖住（穿上看不见、点不到）。 手机档给舞台足高：196×1.31≈257 + bottom22 + 余量 → 300px；矮手机档立绘已缩（158px→207px）→ 240px。 */ .pm-tcol-stage .pe-stage{ height:300px; flex:none } .pet-tabs{ grid-template-columns:repeat(3,1fr) } /* 20261016 探针（375×667 饰品列底 989 超出视口 322px）：压提示行距与格子，缩短整卡滚动距离 */ .pe-tip{ font-size:10.5px; padding:5px 8px; margin-top:6px; line-height:1.5 } .pm-selbar{ margin-top:6px } .pm-vcell{ width:80px } .pm-vcell .pm-vi{ width:58px } } /* 视口高度档（20261016 探针校准）：目标 = 装扮工坊整卡零内滚、饰品列不出视口 —— 仅作用于三栏布局（≥641px 宽）；窄屏单栏堆叠有自己的 calc(var(--gz-vh,1vh)*38) 舞台，勿被高度档覆盖 —— 768 高（平板横屏）档位必须覆盖到 800：760 档恰好漏掉 768（差 8px 擦肩） */ @media (max-height:820px) and (min-width:641px){ .pm-vlist{ max-height:min(calc(var(--gz-vh,1vh)*52),470px) } } @media (max-height:800px) and (min-width:641px){ .pe-tip{ font-size:10.5px; padding:5px 9px; margin-top:5px; line-height:1.45 } .pm-selbar{ margin-top:5px; min-height:28px } .pm-selbar button{ padding:3px 7px; font-size:11px } } @media (max-height:600px) and (min-width:641px){ /* 舞台 calc(var(--gz-vh,1vh)*46) 且立绘同步缩（立绘高≈宽×1.31，必须 ≤ 舞台高，否则盖住「蓝宝的装扮」标题栏 —— 20261016 真机截图发现：舞台 227px 而立绘 302px，宠物头穿出舞台） */ .pm-tcol-stage .pe-stage .pet-ava{ width:min(175px,42%) } .pm-vlist{ max-height:min(calc(var(--gz-vh,1vh)*42),340px) } .pe2-hd{ margin-bottom:4px } /* 540 逻辑高实测：selbar 换行 76px + tip 6 行 86px = 162px 撑爆卡片 → 压按钮 + tip 收进 3 行内滚 */ .pm-selbar button{ padding:2px 6px; font-size:10.5px } .pe-tip{ font-size:10px; padding:4px 8px; max-height:3.8em; overflow-y:auto } } /* 矮手机（≤640 宽且 ≤700 高）：单栏堆叠下压舞台与提示，缩短整卡滚动距离 （立绘同步缩：高≈宽×1.31 须 ≤ 舞台高，否则穿出舞台盖住标题） */ @media (max-width:640px) and (max-height:700px){ .pm-tcol-stage .pe-stage .pet-ava{ width:min(158px,48%) } .pm-tcol-stage .pe-stage{ height:240px; flex:none } .pe-tip{ max-height:5em; overflow-y:auto } .pm-selbar button{ padding:3px 7px; font-size:11px } } .pm-gear{ position:absolute; touch-action:none; cursor:grab; user-select:none; -webkit-user-select:none; transform-origin:50% 50% } /* 20261020 移动端触摸审计：小件饰品实渲染仅 25~42px（<44px 触控标准，手指点不准）→ ::after 透明热区四向各扩 14px（蝴蝶结 26→54px）。纯命中扩展，无视觉变化。 */ .pm-gear::after{ content:''; position:absolute; inset:-14px } /* 20261020 移动端触摸审计：背层饰品（星辰光环/蝴蝶翅膀）中心被立绘 img 盖住点不到， 只能摸露出的边缘——手指操作很费劲。舞台内立绘放行穿透（挂件不受影响，选择器限定面板舞台）： 点立绘本就无任何行为，穿透后光环/翅膀中心可直接选中拖动。 */ .gz-veil #gzPmStage .pet-ava>img:not(.pgear){ pointer-events:none } .pm-gear:active{ cursor:grabbing } .pm-gear img{ width:100%; display:block; pointer-events:none; filter:drop-shadow(0 2px 3px rgba(90,60,20,.28)) } .pm-gear .pm-emoji{ display:block; text-align:center; font-size:clamp(22px,4.5vw,40px); line-height:1; pointer-events:none; filter:drop-shadow(0 2px 2px rgba(90,60,20,.25)) } .pm-gear .rm{ position:absolute; top:-9px; right:-9px; width:20px; height:20px; border-radius:50%; background:#e2574c; color:#fff; font-size:13px; line-height:20px; text-align:center; font-weight:900; box-shadow:0 2px 4px rgba(0,0,0,.25); display:none; cursor:pointer } .pm-gear.sel{ outline:2px dashed #f59e0b; outline-offset:4px; border-radius:10px } .pm-gear.sel .rm, .pm-gear:hover .rm{ display:block } .pm-selbar{ display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; align-items:center; justify-content:center; min-height:34px } .pm-selbar button{ border:2px solid #e8b84b; background:#fff8e6; border-radius:10px; padding:5px 10px; font-size:12px; font-weight:700; color:#7a5a20; cursor:pointer } .pm-selbar button:hover{ background:#ffe9b8 } /* 饰品「初始状态」自校准（2026-10-14）：读值 + 保存 + 恢复出厂 */ .pm-selbar .pm-selnm{ font-size:12px; font-weight:700; color:#7a6a4a; align-self:center } /* 2026-10-14：坐标读值(x/y/w/r)不再展示——它占宽会把「左转/右转/缩小/放大」挤到换行。 需要重新查看读值调试时，把下面这行的 display:none 删掉即可恢复。 */ .pm-selbar .pm-selval{ display:none; font-size:11px; color:#a8895e; align-self:center; padding:2px 7px; border-radius:8px; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.3px; background:rgba(255,248,230,.9); border:1px dashed #e0bd7a } .pm-selbar .pm-hint{ font-size:12px; color:#9a8a6a; align-self:center } .pm-selbar .pm-savegrp{ flex-basis:100%; display:flex; gap:6px; justify-content:center; align-items:center; margin-top:2px } .pm-selbar button.pm-save{ border-color:#5a9a3a; background:linear-gradient(180deg,#a8d884,#78b454); color:#12300a } .pm-selbar button.pm-save:hover{ background:linear-gradient(180deg,#b8e294,#88c464) } .pm-selbar button.pm-rst{ border-color:#c9a76a; background:#fff4d6; color:#8a6a35 } .pm-selbar button:disabled{ opacity:.42; cursor:default } .pet-card.game .pm-selbar .pm-selnm{ color:#c9a76a } .pet-card.game .pm-selbar .pm-selval{ color:#e8cf9e; background:rgba(43,29,16,.9); border-color:#6a4a24 } .pet-card.game .pm-selbar .pm-hint{ color:#a8895e } .pet-card.game .pm-selbar button.pm-save{ background:linear-gradient(180deg,#8cc266,#5a9a3a); border-color:#5a9a3a; color:#12300a } .pet-card.game .pm-selbar button.pm-rst{ background:#2b1d10; border-color:#6a4a24; color:#c9a76a } .pm-pe{ font-size:30px; line-height:1; display:block } /* ===== 圆角容器滚动条自愈（2026-10-15）===== 原生滚动条是通高方角，直接滚动带圆角的容器会把滚动条顶出圆角外（用户截图：通行证弹窗右缘）。 统一改为：轨道透明（圆角区不绘制任何东西）+ 滑块圆角内嵌（background-clip 挖空边框）。 覆盖全站会滚动的圆角容器；页面各自内嵌的 .gzc-drawer / #gzCoach 样式不含 scrollbar 伪元素规则，与本块无冲突。 （通行证 .mslic-card 已单独重构为内层 .mslic-body 滚动，这里只补统一外观。） */ .gzc-drawer, #gzCoach, .gz-card, .pet-diary, .gmc, .dbg, .mslic-body{ scrollbar-width:thin; scrollbar-color:#cdb38a transparent } .gzc-drawer::-webkit-scrollbar, #gzCoach::-webkit-scrollbar, .gz-card::-webkit-scrollbar, .pet-diary::-webkit-scrollbar, .gmc::-webkit-scrollbar, .dbg::-webkit-scrollbar, .mslic-body::-webkit-scrollbar{ width:10px; height:10px } .gzc-drawer::-webkit-scrollbar-thumb, #gzCoach::-webkit-scrollbar-thumb, .gz-card::-webkit-scrollbar-thumb, .pet-diary::-webkit-scrollbar-thumb, .gmc::-webkit-scrollbar-thumb, .dbg::-webkit-scrollbar-thumb, .mslic-body::-webkit-scrollbar-thumb{ background:#cdb38a; border-radius:8px; border:2.5px solid transparent; background-clip:padding-box } .gzc-drawer::-webkit-scrollbar-track, #gzCoach::-webkit-scrollbar-track, .gz-card::-webkit-scrollbar-track, .pet-diary::-webkit-scrollbar-track, .gmc::-webkit-scrollbar-track, .dbg::-webkit-scrollbar-track, .mslic-body::-webkit-scrollbar-track{ background:transparent } .gzc-drawer::-webkit-scrollbar-corner, #gzCoach::-webkit-scrollbar-corner, .gz-card::-webkit-scrollbar-corner, .pet-diary::-webkit-scrollbar-corner, .gmc::-webkit-scrollbar-corner, .dbg::-webkit-scrollbar-corner, .mslic-body::-webkit-scrollbar-corner{ background:transparent } /* ===== 触控尺寸下限（2026-10-20）===== 平板/小屏下把「工具条类」按钮提到 ≥34px，避免手指点不准。 ⚠️ 只命中工具条容器（顶栏/难度条/核心条/宠物挂件），绝不写裸 button —— 会误伤格子、键盘、网格内按钮。 */ @media (max-width:640px){ #gzTopBar a.backBtn, #gzTopBar > button, #gzDiffBar button, #gzCoreBar button.gzbtn, #gzPetDock button.pd-x{ min-height:44px; min-width:40px; display:inline-flex; align-items:center; justify-content:center; padding:4px 10px; line-height:1.1 } }