/* 学习伙伴宠物样式。上半区 @keyframes 逐字移植自设计源(宠物动作动画依赖,勿改名)。 */
@keyframes breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.02)}}
@keyframes hop{0%,100%{transform:translateY(0) scale(1,1)}20%{transform:translateY(3px) scale(1.06,.94)}50%{transform:translateY(-16px) scale(.96,1.06)}80%{transform:translateY(2px) scale(1.04,.96)}}
@keyframes jump{0%,100%{transform:translateY(0) scale(1,1)}15%{transform:translateY(3px) scale(1.06,.92)}45%{transform:translateY(-26px) scale(.95,1.07)}80%{transform:translateY(0) scale(1,1)}}
@keyframes sleepBob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(3px) rotate(-3deg) scale(1.015)}}
@keyframes thinkTilt{0%,100%{transform:rotate(0)}45%,65%{transform:rotate(5deg)}}
@keyframes leanSway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes eggShake{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes blink{0%,90%,100%{transform:scaleY(1)}95%{transform:scaleY(.12)}}
@keyframes waveArm{0%,100%{transform:rotate(10deg)}50%{transform:rotate(-28deg)}}
@keyframes celebrateShake{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(6deg)}}
@keyframes tapChin{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes floatZ{0%{transform:translate(0,0) scale(.5);opacity:0}25%{opacity:1}100%{transform:translate(16px,-34px) scale(1.2);opacity:0}}
@keyframes confettiFall{0%{transform:translateY(-6px) rotate(0);opacity:0}12%{opacity:1}100%{transform:translateY(150px) rotate(420deg);opacity:0}}
@keyframes sparkle{0%,100%{transform:scale(.3);opacity:.2}50%{transform:scale(1);opacity:1}}
@keyframes bulb{0%,100%{transform:scale(.94);opacity:.92}50%{transform:scale(1.06);opacity:1}}
@keyframes spout{0%{transform:translateY(4px) scale(.6);opacity:0}30%{opacity:1}100%{transform:translateY(-22px) scale(1);opacity:0}}

/* ===== 布局 ===== */
/* 浮层陪伴（学习页左下角，避开右下的小元 AI 悬浮按钮） */
.pet-float{position:fixed;left:18px;bottom:18px;z-index:9000;width:96px;height:96px;cursor:pointer;
  filter:drop-shadow(0 10px 20px rgba(18,96,66,.28));transition:transform .18s}
.pet-float:hover{transform:translateY(-3px) scale(1.05)}
.pet-float__art{width:100%;height:100%}
.pet-float__bubble{position:absolute;top:-14px;left:50%;transform:translateX(-50%);white-space:nowrap;
  background:#22A877;color:#fff;font-size:12.5px;font-weight:700;padding:6px 12px;border-radius:999px;
  box-shadow:0 6px 16px -6px rgba(20,120,80,.6);animation:breathe 1.6s ease-in-out infinite}

/* 个人中心入口卡 */
.pet-entry{display:flex;align-items:center;gap:16px;cursor:pointer;transition:transform .15s}
.pet-entry:hover{transform:translateY(-2px)}
.pet-entry__art{width:88px;height:88px;flex:0 0 88px}
.pet-entry__meta{flex:1;min-width:0}
.pet-entry__title{font-weight:700;color:#1B3C31;margin-bottom:2px}
.pet-entry__stage{font-size:13px;color:#5C7669;margin-bottom:8px}
.pet-entry__bar{height:8px;border-radius:999px;background:#E4F2EB;overflow:hidden}
.pet-entry__bar>i{display:block;height:100%;background:linear-gradient(90deg,#34BE8E,#22A877);border-radius:999px}
.pet-entry__hint{font-size:12px;color:#6E877B;margin-top:6px}
.pet-entry__btn{flex:0 0 auto;border:0;background:#E4F2EB;color:#1E9E7E;font-weight:700;
  padding:8px 14px;border-radius:999px;cursor:pointer}

/* 详情面板浮层 */
.pet-overlay{position:fixed;inset:0;background:rgba(15,40,30,.55);z-index:9999;display:flex;
  align-items:center;justify-content:center;padding:16px;font-family:'Noto Sans SC',system-ui,sans-serif}
.pet-panel{width:100%;max-width:720px;max-height:92vh;overflow:auto;background:#fff;border-radius:24px;
  padding:22px;box-shadow:0 30px 80px -30px rgba(18,96,66,.6)}
.pet-panel__hero{position:relative;height:300px;border-radius:20px;
  background:radial-gradient(78% 70% at 50% 36%,#ECF9F2 0%,#DCEFE6 100%);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.pet-panel__art{width:280px;height:280px}
.pet-panel__name{font-family:'ZCOOL KuaiLe',cursive;font-size:24px;color:#1B3C31}
.pet-panel__row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px}
.pet-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pet-actions button{padding:8px 14px;border-radius:999px;border:1px solid #D8E8E0;background:#F3FAF6;
  color:#3C5249;font-weight:600;cursor:pointer;font-family:inherit}
.pet-actions button.on{background:#22A877;color:#fff;border-color:transparent}
.pet-actions button:disabled{opacity:.4;cursor:not-allowed}
.pet-evo{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin-top:14px}
.pet-evo button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 8px;border-radius:16px;
  background:#fff;cursor:pointer;border:2px solid #EAF2EE;box-shadow:0 8px 22px -16px rgba(20,90,60,.4)}
.pet-evo button.locked{opacity:.6;border-style:dashed}
.pet-evo button.cur{border-color:#22A877}
.pet-evo__art{width:72px;height:72px}
.pet-evo__name{font-family:'ZCOOL KuaiLe',cursive;font-size:14px;color:#1B3C31}
.pet-evo__h{font-size:11px;color:#6E877B}
.pet-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin-top:14px}
.pet-pick button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px;border-radius:16px;
  background:#F5FAF7;border:2px solid transparent;cursor:pointer}
.pet-pick button.on{background:#fff}
.pet-pick__art{width:56px;height:56px}
.pet-pick__name{font-size:12.5px;font-weight:600;color:#3C5249}
.pet-close{border:0;background:#f3f4f6;color:#6b7280;font-weight:700;padding:9px 16px;border-radius:12px;cursor:pointer}
@media (max-width:520px){.pet-panel__hero{height:230px}.pet-panel__art{width:210px;height:210px}}

/* 未解锁阶 · 神秘剪影单元 */
.pet-evo__cell.mystery{opacity:.9;border-style:dashed;background:#F6FAF8}
.pet-evo__cell.mystery.next{border-color:#9BD3BC;background:#EFFaf4}
.pet-evo__name.mystery{color:#9FB6AB;font-family:'Noto Sans SC',sans-serif;font-weight:600;font-size:12px}

/* 领取 CTA（未领取时浮层/入口卡显示） */
.pet-cta{display:flex;align-items:center;gap:10px;cursor:pointer;color:#1E9E7E;font-weight:700}
.pet-float.cta{width:auto;height:auto;padding:12px 16px;background:#fff;border-radius:999px;
  box-shadow:0 10px 26px -12px rgba(20,120,80,.5);font-weight:700;color:#1E9E7E;font-size:14px;
  display:flex;align-items:center;gap:6px;animation:breathe 2.4s ease-in-out infinite}
.pet-entry.cta{justify-content:flex-start;gap:12px}
.pet-entry__gift{font-size:34px;flex:0 0 auto;animation:leanSway 3s ease-in-out infinite}

/* 抽卡弹窗 */
.pet-gacha-overlay{position:fixed;inset:0;background:rgba(15,40,30,.6);z-index:10000;display:flex;
  align-items:center;justify-content:center;padding:16px;font-family:'Noto Sans SC',system-ui,sans-serif}
.pet-gacha{width:100%;max-width:560px;background:#fff;border-radius:24px;padding:26px 22px 22px;text-align:center;
  box-shadow:0 30px 90px -30px rgba(18,96,66,.7)}
.pet-gacha__title{font-family:'ZCOOL KuaiLe',cursive;font-size:23px;color:#1B3C31}
.pet-gacha__sub{font-size:13px;color:#6E877B;margin-top:6px}
.pet-gacha__cards{display:flex;gap:12px;justify-content:center;margin:20px 0 8px;flex-wrap:wrap}
.pet-gacha__card{width:150px;border-radius:20px;border:2px solid #EAF2EE;background:#F7FCFA;padding:12px 8px;cursor:pointer;
  transition:transform .15s,border-color .15s,box-shadow .15s;position:relative}
.pet-gacha__card:hover{transform:translateY(-4px)}
.pet-gacha__card.on{border-color:#22A877;box-shadow:0 14px 30px -16px rgba(20,120,80,.6);background:#fff}
.pet-gacha__art{width:110px;height:110px;margin:0 auto;opacity:0;transform:scale(.6) rotate(-8deg);
  transition:opacity .4s ease,transform .5s cubic-bezier(.2,1.4,.4,1)}
.pet-gacha__card.revealed .pet-gacha__art{opacity:1;transform:none}
.pet-gacha__name{font-family:'ZCOOL KuaiLe',cursive;font-size:16px;color:#1B3C31;margin-top:4px;
  opacity:0;transition:opacity .4s .1s}
.pet-gacha__card.revealed .pet-gacha__name{opacity:1}
.pet-gacha__cover{position:absolute;inset:0;border-radius:18px;background:linear-gradient(135deg,#34BE8E,#22A877);
  display:flex;align-items:center;justify-content:center;font-size:40px;transition:opacity .4s}
.pet-gacha__card.revealed .pet-gacha__cover{opacity:0;pointer-events:none}
.pet-gacha__actions{display:flex;gap:10px;justify-content:center;align-items:center;margin-top:14px;flex-wrap:wrap}
.pet-gacha__confirm{border:0;background:#22A877;color:#fff;font-weight:700;font-family:inherit;
  padding:11px 24px;border-radius:12px;cursor:pointer;font-size:15px}
.pet-gacha__confirm:disabled{opacity:.45;cursor:not-allowed}
.pet-gacha__later{border:0;background:#f3f4f6;color:#6b7280;font-weight:700;padding:11px 16px;border-radius:12px;cursor:pointer}
.pet-gacha__note{font-size:12px;color:#B08968;margin-top:10px}

/* ===== 孵蛋 / 开胶囊 动画 ===== */
@keyframes eggBob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-4px) rotate(2deg)}}
@keyframes hatchShake{0%,100%{transform:rotate(-9deg)}20%{transform:rotate(9deg)}45%{transform:rotate(-7deg)}70%{transform:rotate(7deg)}}
@keyframes hatchPop{0%{opacity:0;transform:scale(.3) rotate(-14deg)}60%{opacity:1;transform:scale(1.14) rotate(4deg)}100%{transform:scale(1) rotate(0)}}
@keyframes capGlow{0%,100%{box-shadow:0 0 0 0 rgba(52,190,142,.0);transform:translateY(0) scale(1)}50%{box-shadow:0 0 22px 7px rgba(52,190,142,.34);transform:translateY(-2px) scale(1.05)}}
@keyframes burstRing{0%{opacity:.85;transform:translate(-50%,-50%) scale(.2)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.9)}}
@keyframes nodePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.28)}}
@keyframes partBurst{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(calc(-50% + var(--tx,0)),calc(-50% + var(--ty,0))) scale(.4)}}

/* 神秘蛋(抽卡封面) */
.pet-egg{width:92px;height:116px;margin:6px auto 0;position:relative;
  border-radius:50% 50% 50% 50%/60% 60% 42% 42%;
  background:radial-gradient(58% 52% at 42% 32%, #FFFDF6, #EAF3EC 60%, #D0E4D9);
  box-shadow:inset -6px -9px 15px rgba(120,150,130,.28), 0 8px 18px -10px rgba(20,90,60,.4);
  animation:eggBob 2.6s ease-in-out infinite;transition:opacity .4s,transform .4s}
.pet-egg::after{content:'?';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:700 32px 'Baloo 2',sans-serif;color:#BFD5C9}
.pet-gacha__card.hatching .pet-egg{animation:hatchShake .4s ease-in-out 2}
.pet-gacha__card.revealed .pet-egg{opacity:0;transform:scale(.55);pointer-events:none}
.pet-gacha__card .pet-gacha__art{opacity:0;transform:scale(.5);transition:none;position:absolute;left:0;right:0;top:12px;margin:auto}
.pet-gacha__card{position:relative;min-height:150px}
.pet-gacha__card.revealed .pet-gacha__art{opacity:1;transform:none;animation:hatchPop .6s cubic-bezier(.2,1.4,.4,1)}
.pet-gacha__card .pet-gacha__name{opacity:0;transition:opacity .4s .15s}
.pet-gacha__card.revealed .pet-gacha__name{opacity:1}
.pet-gacha__hint{font-size:11.5px;color:#9FB6AB;margin-top:2px}
.pet-gacha__card.revealed .pet-gacha__hint{display:none}

/* 光爆碎屑(孵蛋/开胶囊揭晓瞬间) */
.pet-burst{position:absolute;left:50%;top:44%;width:70px;height:70px;pointer-events:none}
.pet-burst i{position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:2px;
  transform:translate(-50%,-50%);animation:partBurst .8s ease-out forwards}
.pet-burst .ring{position:absolute;left:50%;top:50%;width:60px;height:60px;border-radius:50%;
  border:3px solid rgba(52,190,142,.6);animation:burstRing .7s ease-out forwards}

/* 成长胶囊(进化线三态) */
.pet-cap{width:72px;height:72px;margin:0 auto;position:relative;
  border-radius:50% 50% 50% 50%/58% 58% 44% 44%}
.pet-cap.ready{cursor:pointer;animation:capGlow 1.6s ease-in-out infinite;
  background:radial-gradient(58% 52% at 42% 32%, #fff, var(--acc,#34BE8E))}
.pet-cap.ready::after{content:'🎁';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:26px}
.pet-cap.queued{background:radial-gradient(58% 52% at 42% 32%, #F3F8F5, #DDE8E2);opacity:.75}
.pet-cap.queued::after{content:'🎁';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:22px;filter:grayscale(.5);opacity:.6}
.pet-cap.locked{background:#F4F8F6;border:2px dashed #C6DAD0}
.pet-cap.locked::after{content:'🔒';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:22px;opacity:.7}
.pet-evo__cell.ready{cursor:pointer}
.pet-evo__cell.opening .pet-cap{animation:hatchShake .42s ease-in-out 2}
.pet-evo__cell.opened-anim .pet-evo__art{animation:hatchPop .6s cubic-bezier(.2,1.4,.4,1)}

/* 入口卡里程碑条 */
.pet-strip{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:8px}
.pet-strip__node{width:14px;height:14px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:9px;line-height:1;flex:0 0 auto}
.pet-strip__node.done{background:linear-gradient(135deg,#34BE8E,#22A877);box-shadow:0 2px 5px -2px rgba(20,120,80,.6)}
.pet-strip__node.ready{background:#F4D06A;animation:nodePulse 1.4s ease-in-out infinite}
.pet-strip__node.lock{background:#E4ECE8;color:#A6BBB0;width:14px;height:14px;font-size:8px}
.pet-strip__node.lock::after{content:'🔒'}
.pet-strip__nudge{font-size:12px;color:#B8860B;font-weight:700;margin-top:8px;cursor:pointer}

/* ===== 开箱大典（主页面居中，全屏仪式） ===== */
@keyframes cerIn{from{opacity:0}to{opacity:1}}
@keyframes cerBob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-8px) rotate(1.5deg)}}
@keyframes cerShake{0%,100%{transform:rotate(-6deg)}20%{transform:rotate(6deg)}45%{transform:rotate(-5deg)}70%{transform:rotate(5deg)}}
@keyframes cerLidFly{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(-140px) rotate(-22deg);opacity:0}}
@keyframes cerRays{0%{transform:translate(-50%,-50%) rotate(0) scale(.3);opacity:0}30%{opacity:.85}100%{transform:translate(-50%,-50%) rotate(140deg) scale(1.4);opacity:0}}
@keyframes cerFlash{0%{opacity:0}25%{opacity:.95}100%{opacity:0}}
@keyframes cerPetRise{0%{opacity:0;transform:translateY(36px) scale(.2)}55%{opacity:1;transform:translateY(-12px) scale(1.16)}100%{transform:translateY(0) scale(1)}}
@keyframes cerRevIn{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}

.pet-cer{position:fixed;inset:0;z-index:11000;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;
  background:radial-gradient(58% 48% at 50% 42%, rgba(22,64,48,.5), rgba(8,24,18,.86));animation:cerIn .3s ease;font-family:'Noto Sans SC',sans-serif}
.pet-cer__cap{color:#EAF6EF;font-family:'ZCOOL KuaiLe',cursive;font-size:20px;letter-spacing:1px}
.pet-cer__hint{color:rgba(220,240,230,.82);font-size:13px;margin:6px 0 18px}
.pet-cer__arena{position:relative;width:300px;height:288px;display:flex;align-items:center;justify-content:center}
.pet-cer__rays{position:absolute;left:50%;top:50%;width:360px;height:360px;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;opacity:0;
  background:repeating-conic-gradient(from 0deg, rgba(255,238,170,0) 0 9deg, rgba(255,238,170,.55) 9deg 13deg)}
.pet-cer.opening .pet-cer__rays{animation:cerRays 1s .3s ease-out forwards}
.pet-cer__flash{position:absolute;left:50%;top:50%;width:280px;height:280px;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;opacity:0;
  background:radial-gradient(circle,#fff 0,rgba(255,255,255,0) 68%)}
.pet-cer.opening .pet-cer__flash{animation:cerFlash .85s .3s ease-out forwards}
.pet-cer__box{width:168px;height:156px;position:relative;cursor:pointer;filter:drop-shadow(0 18px 30px rgba(0,0,0,.42));animation:cerBob 2.4s ease-in-out infinite}
.pet-cer.opening .pet-cer__box{animation:cerShake .5s ease-in-out 2}
.pet-cer.opened .pet-cer__box{display:none}
.pet-cer__box .bd{position:absolute;bottom:0;left:8px;right:8px;height:110px;border-radius:12px;background:var(--acc,#34BE8E);overflow:hidden}
.pet-cer__box .bd::before{content:'';position:absolute;inset:0;background:radial-gradient(70% 60% at 40% 26%, rgba(255,255,255,.5), rgba(255,255,255,0) 60%),linear-gradient(0deg, rgba(0,0,0,.16), rgba(0,0,0,0) 42%)}
.pet-cer__box .bd::after{content:'';position:absolute;left:50%;top:0;bottom:0;width:22px;transform:translateX(-50%);background:rgba(255,255,255,.42)}
.pet-cer__box .ld{position:absolute;top:16px;left:0;right:0;height:40px;border-radius:11px;z-index:2;background:var(--acc,#34BE8E);overflow:hidden}
.pet-cer__box .ld::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.08))}
.pet-cer__box .ld::after{content:'';position:absolute;left:50%;top:0;bottom:0;width:22px;transform:translateX(-50%);background:rgba(255,255,255,.62)}
.pet-cer__box .bow{position:absolute;top:2px;left:50%;transform:translateX(-50%);width:36px;height:22px;z-index:3;border-radius:50% 50% 46% 46%;
  background:radial-gradient(circle at 32% 38%, rgba(255,255,255,.55), rgba(255,255,255,0) 62%), var(--acc,#34BE8E);box-shadow:0 3px 5px rgba(0,0,0,.28)}
.pet-cer.opening .pet-cer__box .ld,.pet-cer.opening .pet-cer__box .bow{animation:cerLidFly .6s .34s ease-in forwards}
.pet-cer__pet{position:absolute;width:230px;height:230px;opacity:0;pointer-events:none}
.pet-cer.opened .pet-cer__pet{opacity:1;animation:cerPetRise .85s cubic-bezier(.2,1.3,.4,1)}
.pet-cer__reveal{margin-top:2px;text-align:center;opacity:0;min-height:52px}
.pet-cer.opened .pet-cer__reveal{animation:cerRevIn .5s .5s ease forwards}
.pet-cer__reveal b{font-family:'ZCOOL KuaiLe',cursive;font-size:26px;color:#fff}
.pet-cer__reveal span{display:block;color:rgba(220,240,230,.88);font-size:13px;margin-top:3px}
.pet-cer__actions{margin-top:14px;display:flex;gap:12px;min-height:48px}
.pet-cer__go{border:0;background:linear-gradient(135deg,#34BE8E,#22A877);color:#fff;font-weight:700;font-family:inherit;
  padding:13px 30px;border-radius:14px;cursor:pointer;font-size:16px;box-shadow:0 12px 26px -10px rgba(20,150,100,.7)}
.pet-cer__skip{border:0;background:rgba(255,255,255,.14);color:#EAF6EF;font-weight:600;font-family:inherit;padding:13px 20px;border-radius:14px;cursor:pointer}
.pet-panel__open{border:0;background:linear-gradient(135deg,#F2C84B,#F2994A);color:#fff;font-weight:700;font-family:inherit;
  padding:9px 18px;border-radius:999px;cursor:pointer;font-size:14px;box-shadow:0 8px 18px -8px rgba(220,150,40,.7);margin-top:12px}

/* 浮层待开启小徽标 */
.pet-float__badge{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;
  background:#F2994A;color:#fff;font:700 11px 'Baloo 2',sans-serif;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 10px -3px rgba(200,120,40,.7);animation:nodePulse 1.5s ease-in-out infinite}

/* ===== 审查修复:对比度 / 焦点 / 降级动效 / 响应式 / 音效钮 / 提示气泡 ===== */

/* 对比度:压深浅底上的小灰字(过 WCAG AA) */
.pet-evo__name.mystery,.pet-gacha__hint{color:#6E877B}

/* 键盘焦点环(所有可交互元素) */
.pet-entry:focus-visible,.pet-float:focus-visible,.pet-gacha__card:focus-visible,.pet-cer__box:focus-visible,
.pet-evo__cell.ready:focus-visible,.pet-evo__cell.opened:focus-visible,.pet-actions button:focus-visible,
.pet-gacha__confirm:focus-visible,.pet-gacha__later:focus-visible,.pet-cer__go:focus-visible,.pet-cer__skip:focus-visible,
.pet-cer__mute:focus-visible,.pet-close:focus-visible,.pet-panel__open:focus-visible,.pet-entry__btn:focus-visible,
.pet-strip__nudge:focus-visible,.pet-entry__detail:focus-visible{outline:3px solid #22A877;outline-offset:2px;border-radius:8px}

/* 静音开关(开箱大典右上) */
.pet-cer__mute{position:absolute;top:16px;right:16px;border:0;background:rgba(255,255,255,.16);color:#EAF6EF;
  width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center}
.pet-cer__mute:hover{background:rgba(255,255,255,.26)}

/* 入口卡"详情"小入口 + 顶部瞬时提示 */
.pet-entry__detail{border:0;background:transparent;color:#6E877B;font-size:12px;cursor:pointer;text-decoration:underline;padding:2px 4px;font-family:inherit}
.pet-toast{position:fixed;left:50%;top:20px;transform:translateX(-50%);z-index:11500;background:#22A877;color:#fff;
  font-weight:700;font-size:14px;padding:10px 18px;border-radius:999px;box-shadow:0 10px 26px -8px rgba(20,120,80,.6);animation:cerIn .3s ease}

/* 降级动效:尊重系统"减少动态效果" */
@media (prefers-reduced-motion: reduce){
  .pet-float,.pet-float__bubble,.pet-float__badge,.pet-egg,.pet-cap.ready,.pet-cer__box,.pet-strip__node.ready,
  .pet-cer.opening .pet-cer__box,.pet-cer.opening .pet-cer__box .ld,.pet-cer.opening .pet-cer__box .bow,
  .pet-cer.opened .pet-cer__pet,.pet-cer.opened .pet-cer__reveal,.pet-gacha__card.hatching .pet-egg{animation:none !important}
  .pet-cer__pet,.pet-cer__reveal,.pet-gacha__card .pet-gacha__art,.pet-gacha__card .pet-gacha__name{opacity:1 !important;transform:none !important}
  .pet-cer__rays,.pet-cer__flash{display:none !important}
}

/* 窄屏/手机适配 */
@media (max-width:480px){
  .pet-cer{padding:12px}
  .pet-cer__arena{width:90vw;max-width:300px;height:auto;min-height:250px}
  .pet-cer__box{width:140px;height:132px}
  .pet-cer__pet{width:188px;height:188px}
  .pet-cer__go{padding:12px 22px;font-size:15px}
  .pet-gacha{padding:22px 14px 18px}
  .pet-gacha__cards{gap:8px}
  .pet-gacha__card{width:29vw;min-width:92px}
  .pet-egg{width:72px;height:90px}
  .pet-float{width:78px;height:78px;left:12px;bottom:12px}
  .pet-entry{flex-wrap:wrap;gap:12px}
  .pet-entry__art{width:72px;height:72px;flex-basis:72px}
  .pet-entry__btn{width:100%;order:3}
}


/* ===== v7:成长星级 + 进度条 + 改名 ===== */
.pet-stars{color:#E9B93C;font-size:13px;letter-spacing:2px;margin-left:8px;vertical-align:1px}
.pet-stars i{font-style:normal}
.pet-stars i:not(.on){color:#C9D6CD}
.pet-grow{margin-top:8px;max-width:340px}
.pet-grow__bar{height:6px;border-radius:999px;background:rgba(27,60,49,.10);overflow:hidden}
.pet-grow__bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#34BE8E,#7FD8B4);transition:width .5s ease}
.pet-grow__txt{font-size:11.5px;color:#6E877B;margin-top:4px}
.pet-rename-btn{border:none;background:transparent;cursor:pointer;font-size:13px;padding:2px 5px;margin-left:2px;border-radius:6px;line-height:1}
.pet-rename-btn:hover{background:rgba(27,60,49,.08)}
.pet-rename-form{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px}
.pet-rename-form input{flex:1 1 150px;min-width:0;border:1.5px solid rgba(27,60,49,.18);border-radius:8px;padding:6px 10px;font-size:13.5px;font-family:inherit}
.pet-rename-form input:focus{outline:2px solid #34BE8E;outline-offset:1px}
.pet-rename-form button{border:none;border-radius:8px;padding:6px 12px;font-size:13px;cursor:pointer}
.pet-rename-form .ok{background:#1B3C31;color:#fff}
.pet-rename-form .ok:disabled{opacity:.6;cursor:default}
.pet-rename-form .no{background:rgba(27,60,49,.08);color:#1B3C31}
.pet-rename-hint{flex-basis:100%;font-size:11.5px;color:#8AA095}