/* 奶蛙宇宙·生息孵化动画：纯前端视觉层，不决定倒计时和奖励。 */
.hatch-stage-preview{background:radial-gradient(circle at 50% 40%,#f7fbe9,#eaf4dd 70%,#e2efda);border-radius:24px;min-height:250px;display:grid;place-items:center;position:relative;overflow:hidden;isolation:isolate}
.hatch-stage-preview::after{content:'';position:absolute;bottom:19px;width:57%;height:17px;border-radius:50%;background:#73957b26;filter:blur(10px)}
.hatch-scene{--hatch-power:.25;position:relative;width:180px;height:185px;display:grid;place-items:center;isolation:isolate}
.hatch-scene-small{width:100px;height:100px;margin:auto}
.hatch-aura{position:absolute;width:85%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fffbd9 5%,#cae8b774 40%,transparent 72%);filter:blur(4px);opacity:calc(.28 + var(--hatch-power)*.6);animation:hatchAura 3.6s ease-in-out infinite}
.hatch-ring{position:absolute;width:94%;aspect-ratio:1;border:1.5px solid #b9d88bc0;border-radius:50%;box-shadow:0 0 25px #c7e9b562;animation:hatchRing 14s linear infinite}
.hatch-ring::before,.hatch-ring::after{content:'✦';position:absolute;color:#a8cc72;font-size:13px}.hatch-ring::before{left:9px;top:20px}.hatch-ring::after{right:-2px;bottom:20px}
.hatch-egg{position:relative;z-index:2;display:block;width:107px;height:137px;border-radius:52% 52% 45% 45% / 62% 62% 39% 39%;background:radial-gradient(circle at 32% 26%,#fff 2%,#fff8cf 24%,transparent 47%),linear-gradient(135deg,#fff3af 0%,#ffe295 38%,#f2ca68 70%,#e8b75f 100%);box-shadow:inset -15px -14px 23px #b88d2933,inset 10px 13px 23px #fff9e8b0,0 22px 28px #897b3144,0 0 25px #fbec98a0;animation:hatchBreathe 3.4s ease-in-out infinite;transform-origin:50% 94%}
.hatch-egg::before{content:'';position:absolute;top:44px;left:19px;width:56px;height:45px;background:radial-gradient(ellipse,#fffdeb99 1%,transparent 70%);border-radius:50%}
.hatch-egg::after{content:'';position:absolute;bottom:21px;left:29px;width:50px;height:22px;border-radius:50%;background:#fff8de6b;filter:blur(8px)}
.hatch-scene-small .hatch-egg{width:62px;height:80px;box-shadow:inset -6px -8px 10px #b88d2933,0 10px 15px #897b312f}.hatch-scene-small .hatch-egg::before{top:22px;left:12px;width:32px;height:27px}.hatch-scene-small .hatch-egg::after{display:none}
.hatch-speck{position:absolute;z-index:2;width:5px;height:5px;background:#fff8bd;border-radius:50%;left:50%;top:50%;box-shadow:0 0 10px #b3d771;animation:hatchSpeck 3s ease-in-out infinite;animation-delay:calc(var(--i)*-.34s);transform:rotate(calc(var(--i)*45deg)) translateY(-82px)}
.hatch-scene-small .hatch-speck{width:3px;height:3px;transform:rotate(calc(var(--i)*45deg)) translateY(-43px)}
.hatch-scene[data-hatch-phase="late"] .hatch-egg,.hatch-scene[data-hatch-phase="ready"] .hatch-egg{animation:hatchWiggle 1.5s ease-in-out infinite}
.hatch-scene[data-hatch-phase="ready"] .hatch-aura{background:radial-gradient(circle,#fff 0%,#fff1a9 37%,transparent 73%);opacity:.9}
.hatch-scene[data-hatch-phase="ready"] .hatch-ring{border-color:#eab85b;box-shadow:0 0 28px #f6c86185}
.hatch-live-timer{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:700;color:#4e6c5c}
.hatch-progress-rail{height:9px;background:#eef2e8;overflow:hidden;border-radius:20px}
.hatch-progress-rail span{display:block;height:100%;background:linear-gradient(90deg,#a2c993,#eed88b);border-radius:20px;transition:width 1s linear}
.hatch-detail{font-size:12px;color:#6e826d;line-height:1.5}
.hatch-preview-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:18px 0 4px}
.hatch-demo-note{font-size:12px;color:#657766;margin:6px 0 0}
.hatch-live-ready{color:#8b681d!important}
/* 全屏破壳表演 */
#hatch-ceremony[hidden]{display:none!important}
#hatch-ceremony{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:18px;background:#1b2b26dc;backdrop-filter:blur(10px)}
body.hatch-ceremony-open{overflow:hidden}
.hatch-ceremony-panel{width:min(610px,100%);max-height:calc(100dvh - 36px);overflow-y:auto;position:relative;border:1px solid #c9daa9;background:linear-gradient(150deg,#fdfcf4,#eaf3e3);padding:21px;border-radius:26px;box-shadow:0 24px 100px #0007;color:#344e42;text-align:center}
.hatch-ceremony-top{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left}.hatch-ceremony-top strong{font-size:14px}.hatch-ceremony-top button{border:0;border-radius:50%;width:38px;height:38px;background:#fff8;cursor:pointer;font-size:23px;color:#46624d}
.hatch-ceremony-scene{position:relative;margin:14px auto 10px;width:min(100%,460px);height:300px;border-radius:23px;background:radial-gradient(ellipse at 50% 53%,#fcfce6 0%,#d7eccd 60%,#c3dfc0 100%);isolation:isolate;overflow:hidden;display:grid;place-items:center}
.hatch-ceremony-scene:before{content:'';position:absolute;inset:14%;border-radius:50%;background:conic-gradient(from 0deg,transparent,#eaffb7aa,transparent,#f4d88cb1,transparent);filter:blur(15px);opacity:.7;animation:hatchRing 12s linear infinite}
.hatch-ceremony-scene:after{content:'';position:absolute;bottom:26px;width:40%;height:18px;border-radius:50%;background:#59724f30;filter:blur(9px)}
.hatch-ceremony-scene .hatch-scene{transform:scale(1.18);z-index:1}
.hatch-ceremony-scene .hatch-egg{animation:hatchWiggle 1.2s ease-in-out infinite}
.hatch-ceremony-panel[data-hatch-stage="crack"] .hatch-egg{animation:hatchBreak .4s ease-in-out infinite}
.hatch-crack{position:absolute;z-index:4;width:42px;height:58px;left:50%;top:45%;margin-left:-23px;opacity:0;clip-path:polygon(42% 0%,65% 32%,51% 48%,80% 80%,48% 100%,40% 79%,60% 77%,31% 44%,44% 31%);background:#8b7444;filter:drop-shadow(0 0 2px #fff8)}
.hatch-ceremony-panel[data-hatch-stage="crack"] .hatch-crack{opacity:1;animation:hatchCrack .85s ease-in forwards}
.hatch-ceremony-panel[data-hatch-stage="reveal"] .hatch-egg,.hatch-ceremony-panel[data-hatch-stage="reveal"] .hatch-crack{opacity:0;transform:scale(.1);animation:none}
.hatch-light{position:absolute;z-index:3;font-size:100px;line-height:1;color:#ffec94;text-shadow:0 0 18px #fff,0 0 60px #f9e5a3;opacity:0;transform:scale(.2)}
.hatch-ceremony-panel[data-hatch-stage="reveal"] .hatch-light{opacity:1;transform:scale(1);transition:opacity .35s,transform .55s cubic-bezier(.1,1.2,.2,1.1);animation:hatchAura 2s ease-in-out infinite}
.hatch-ceremony-panel[data-hatch-stage="reveal"] .hatch-ceremony-scene{background:radial-gradient(circle,#fffef2,#f2e8c4 60%,#cce1c2)}
.hatch-ceremony-title{font-size:23px;margin:5px 0}.hatch-ceremony-story{font-size:14px;color:#566d59;line-height:1.65;min-height:44px;margin:10px 0}.hatch-ceremony-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:12px}.hatch-ceremony-actions button{padding:11px 17px;border:1px solid #adc6a6;background:#fff;border-radius:13px;font:inherit;cursor:pointer}.hatch-ceremony-actions .hatch-primary{background:#355c48;color:white;border-color:#355c48}.hatch-ceremony-actions button[hidden]{display:none}
.hatch-ceremony-footnote{font-size:11px;color:#7b8476;margin-top:12px}
@keyframes hatchBreathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-7px) scale(1.022)}}
@keyframes hatchAura{0%,100%{transform:scale(.92);opacity:.45}50%{transform:scale(1.12);opacity:.85}}
@keyframes hatchRing{to{transform:rotate(360deg)}}
@keyframes hatchSpeck{0%,100%{opacity:.18}50%{opacity:.95}}
@keyframes hatchWiggle{0%,100%{transform:rotate(-2deg) translateY(0)}45%{transform:rotate(3deg) translateY(-5px)}75%{transform:rotate(-3deg)}}
@keyframes hatchBreak{0%,100%{transform:rotate(0deg)}30%{transform:rotate(-10deg)}70%{transform:rotate(11deg)}}
@keyframes hatchCrack{from{transform:scaleY(.05);opacity:0}to{transform:scaleY(1);opacity:1}}
@media(max-width:650px){.hatch-ceremony-panel{padding:14px;border-radius:20px}.hatch-ceremony-scene{height:245px}.hatch-ceremony-title{font-size:20px}.hatch-preview-actions{flex-direction:column;align-items:stretch}.hatch-preview-actions .btn{width:100%}}
@media(prefers-reduced-motion:reduce){.hatch-aura,.hatch-ring,.hatch-egg,.hatch-speck,.hatch-light,.hatch-ceremony-scene:before{animation:none!important;transition:none!important}.hatch-crack{animation:none!important}}

.hatch-ceremony-steps{display:flex;justify-content:space-between;gap:6px;margin:13px 3px 7px;font-size:11px;color:#74876e}.hatch-ceremony-progress{height:5px;border-radius:20px;background:#dfe9d5;overflow:hidden}.hatch-ceremony-progress span{display:block;width:0%;height:100%;border-radius:20px;background:linear-gradient(90deg,#96c093,#eed18b);transition:width .4s ease}
.hatch-ceremony-panel[data-hatch-stage="nurture"] .hatch-egg{animation:hatchBreathe 2.6s ease-in-out infinite}.hatch-ceremony-panel[data-hatch-stage="glow"] .hatch-egg{animation:hatchWiggle 1.8s ease-in-out infinite}.hatch-ceremony-panel[data-hatch-stage="glow"] .hatch-aura{filter:blur(2px);opacity:.95}

/* 破壳时的两瓣奶金色蛋壳：只在演出中出现，不替代尚未完成的官方角色立绘 */
.hatch-shell-left,.hatch-shell-right{pointer-events:none;position:absolute;z-index:5;width:107px;height:137px;inset:24px auto auto 36px;border-radius:52% 52% 45% 45% / 62% 62% 39% 39%;background:radial-gradient(circle at 32% 26%,#fffbe9 0%,#ffeaac 37%,#dfb357 93%);box-shadow:inset -7px -9px 10px #b78e3852;opacity:0;transform:scale(.6)}
.hatch-shell-left{clip-path:polygon(0 0,55% 0,49% 19%,61% 36%,44% 48%,56% 63%,42% 77%,51% 100%,0 100%)}
.hatch-shell-right{clip-path:polygon(55% 0,100% 0,100% 100%,51% 100%,42% 77%,56% 63%,44% 48%,61% 36%,49% 19%)}
.hatch-ceremony-panel[data-hatch-stage="reveal"] .hatch-shell-left{animation:hatchFallLeft .9s both;opacity:1}
.hatch-ceremony-panel[data-hatch-stage="reveal"] .hatch-shell-right{animation:hatchFallRight .9s both;opacity:1}
@keyframes hatchFallLeft{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(-95px,65px) rotate(-60deg);opacity:.75}}
@keyframes hatchFallRight{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(95px,65px) rotate(60deg);opacity:.75}}
@media(prefers-reduced-motion:reduce){.hatch-ceremony-panel[data-hatch-stage="reveal"] .hatch-shell-left{animation:none;opacity:.65;transform:translate(-82px,40px) rotate(-60deg)}.hatch-ceremony-panel[data-hatch-stage="reveal"] .hatch-shell-right{animation:none;opacity:.65;transform:translate(82px,40px) rotate(60deg)}}

/* V4 奶蛋官方图片；不对用户提供的图片应用改变虹膜的试验色彩滤镜。 */
.hatch-scene .hatch-egg-official{width:155px;height:194px;max-width:none;border-radius:0;background:none;object-fit:fill;clip-path:ellipse(42% 38% at 50% 48%);box-shadow:none;filter:drop-shadow(0 12px 12px #796a4252)}
.hatch-scene-small .hatch-egg-official{width:92px;height:115px;max-width:none;box-shadow:none}
.hatch-scene .hatch-egg-official::before,.hatch-scene .hatch-egg-official::after{display:none}
.hatch-skin-picker{border:1px solid #e2e9d7;background:#fffef9;border-radius:18px;margin:20px auto 18px;padding:20px;max-width:750px}
.hatch-skin-picker-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.hatch-skin-picker-head h3{margin:0;font-size:1.02rem}.hatch-skin-picker-head span{font-size:.82rem;color:#6e786d}
.hatch-skin-choices{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 12px}
.hatch-skin-choice{display:flex;align-items:center;gap:9px;border:1px solid #dce5d8;background:#fff;border-radius:999px;padding:8px 13px;cursor:pointer;font:inherit;color:#38533f}
.hatch-skin-choice i{width:19px;height:19px;border-radius:100%;border:2px solid #fff;background:var(--swatch);box-shadow:0 0 0 1px #c4c5b9}
.hatch-skin-choice.is-selected{border-color:#538467;background:#e9f3e8;font-weight:700;box-shadow:0 0 0 2px #d5e9d8}
.hatch-skin-choice:focus-visible{outline:3px solid #527b65;outline-offset:3px}
.hatch-skin-picker .fine{margin-bottom:0}.hatch-skin-name{color:#608366;display:block;margin:1px 0 7px;font-size:12px}
@media(max-width:600px){.hatch-skin-picker{padding:15px}.hatch-skin-choice{padding:8px 10px}.hatch-skin-choices{gap:7px}}

/* 皮肤选择缩略图保持官方美术原貌（不再使用前端滤镜着色）。 */
.hatch-skin-choice img{width:30px;height:36px;object-fit:cover;object-position:center;border-radius:8px;background:#fff6d7}

/* V4 23-skin catalog: grouped cosmetics, no gameplay effects. */
.hatch-skin-group{margin:16px 0 6px}
.hatch-skin-group h4{font-size:.94rem;margin:0 0 9px;color:#496452}
.hatch-skin-group h4 small{font-size:.75rem;font-weight:400;color:#718574}
.hatch-skin-group .hatch-skin-choices{margin:0 0 12px}
.hatch-skin-choice{max-width:100%;white-space:normal;text-align:left}
.hatch-skin-choice img{flex-shrink:0}
@media(max-width:600px){.hatch-skin-choice{font-size:.82rem;max-width:calc(50% - 5px)}}

/* Theme art deserves readable larger image previews, basic color eggs stay compact. */
.hatch-skin-group[data-skin-group="theme"] .hatch-skin-choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
.hatch-skin-group[data-skin-group="theme"] .hatch-skin-choice{min-width:0;width:100%;max-width:100%;flex-direction:column;border-radius:14px;padding:9px 6px;text-align:center;gap:4px}
.hatch-skin-group[data-skin-group="theme"] .hatch-skin-choice img{width:86px;height:116px;object-fit:contain;border-radius:9px;background:#fff}
.hatch-skin-group[data-skin-group="theme"] .hatch-skin-choice span{font-size:.77rem;line-height:1.25}
@media(max-width:600px){.hatch-skin-group[data-skin-group="theme"] .hatch-skin-choices{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.hatch-skin-group[data-skin-group="theme"] .hatch-skin-choice img{width:100%;height:102px}}

/* 主题皮肤需要激励广告完成验证：锁定提示与移动端样式 */
.hatch-skin-choice.is-locked{border-style:dashed;border-color:#bcb9ae;background:#f6f6f2}.hatch-skin-choice.is-locked img{filter:saturate(.72);opacity:.8}.hatch-skin-lock-status{display:block;font-size:.7rem;line-height:1.3;color:#876b4a}.hatch-skin-choice.is-locked .hatch-skin-lock-status{font-weight:650}.hatch-unlock-status{background:#f9f4e8;border:1px solid #e8d8bc;border-radius:12px;padding:12px 14px;color:#68533d;font-size:.86rem;margin:12px 0}.hatch-skin-choice:focus-visible{outline:3px solid #357b5c;outline-offset:2px}

/* Admin theme skin gallery */
.skin-admin-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:16px}.skin-admin-list .cms-editor-item{min-width:0}.skin-admin-list input,.skin-admin-list select{max-width:100%}