/* 输入框边框皮肤（B11，2026-10-23）
   把 manifest 里的 frame 素材以九宫格 border-image 画在输入框外沿的装饰层上，
   再叠一圈由 @property --pet-angle 驱动的 conic-gradient 流光（2.6s 一圈）。
   只在 body.has-input-frame 时生效；装饰层 pointer-events:none，不吃点击。
   不改 game.js / cat-qa.js / src。 */
@property --pet-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

:root {
  --pet-input-frame-src: none;
  --pet-input-frame-slice: 40;
  --pet-input-frame-bw: 8px;
  --pet-input-glow: rgba(255, 226, 140, 0.92);
  --pet-input-pad: 3px;
}

.pet-input-skin {
  position: absolute;
  display: none;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 24;
  border-style: solid;
  border-color: transparent;
  border-width: var(--pet-input-frame-bw);
  border-image-source: var(--pet-input-frame-src);
  border-image-slice: var(--pet-input-frame-slice);
  border-image-width: var(--pet-input-frame-bw);
  border-image-repeat: stretch;
  border-radius: 14px;
}

body.has-input-frame .pet-input-skin {
  display: block;
}

/* 流光：环形遮罩 + 旋转的锥形渐变，一圈亮光绕着边框跑 */
.pet-input-skin::after {
  content: "";
  position: absolute;
  inset: -3px;
  padding: 2px;
  border-radius: 17px;
  background: conic-gradient(from var(--pet-angle),
      rgba(255, 255, 255, 0) 0deg,
      var(--pet-input-glow) 38deg,
      rgba(255, 255, 255, 0.96) 58deg,
      var(--pet-input-glow) 80deg,
      rgba(255, 255, 255, 0) 124deg 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: pet-frame-flow 2.6s linear infinite;
  will-change: --pet-angle;
}

@keyframes pet-frame-flow {
  from { --pet-angle: 0deg; }
  to { --pet-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .pet-input-skin::after {
    animation-duration: 9s;
  }
}

/* ==========================================================================
   B12（2026-10-23）：同一套按键框也套在小牛身上（绕身一圈的流光框），
   外加点击时的光晕层与粒子层。定位由 /js/pet-fx.js 按小牛实际方框写入。
   ========================================================================== */
.pet-pet-frame{
  position: absolute;
  display: none;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 4;
  border-style: solid;
  border-color: transparent;
  border-width: 10px;
  border-image-source: var(--pet-pet-frame-src, none);
  border-image-slice: 40;
  border-image-width: 10px;
  border-image-repeat: stretch;
  border-radius: 30px;
  filter: drop-shadow(0 0 10px var(--pet-pet-frame-glow, rgba(255, 255, 255, .8)));
  opacity: 0;
  transition: opacity .22s ease;
}
body.has-pet-frame .pet-pet-frame{ display: block; }
.pet-pet-frame.is-on{ opacity: 1; }
.pet-pet-frame::after{
  content: "";
  position: absolute;
  inset: -4px;
  padding: 3px;
  border-radius: 34px;
  background: conic-gradient(from var(--pet-angle),
      rgba(255, 255, 255, 0) 0deg,
      var(--pet-pet-frame-glow, rgba(255, 255, 255, .9)) 40deg,
      #ffffff 62deg,
      var(--pet-pet-frame-glow, rgba(255, 255, 255, .9)) 84deg,
      rgba(255, 255, 255, 0) 132deg 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: pet-frame-flow 2.6s linear infinite;
  will-change: --pet-angle;
}
.pet-pet-frame.is-pulse{ filter: drop-shadow(0 0 20px var(--pet-pet-frame-glow, rgba(255, 255, 255, .95))); }
.pet-pet-frame.is-pulse::after{ animation-duration: .9s; }

/* 点小牛的光晕：装备了东西才创建，1.8s 一拍 */
.pet-fx-halo{
  position: absolute;
  pointer-events: none;
  z-index: 3;
  border-radius: 50%;
  background: radial-gradient(circle,
      var(--pet-fx-halo-core, rgba(255, 240, 180, .92)) 0%,
      var(--pet-fx-halo-core, rgba(255, 240, 180, .55)) 44%,
      rgba(255, 255, 255, 0) 72%);
  opacity: 0;
  transform: scale(.7);
  animation: pet-fx-halo 1.8s ease-out forwards;
}
@keyframes pet-fx-halo{
  0%   { opacity: 0;  transform: scale(.62); }
  16%  { opacity: .95; transform: scale(1.00); }
  58%  { opacity: .55; transform: scale(1.12); }
  100% { opacity: 0;  transform: scale(1.24); }
}
.pet-fx-canvas{
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 5;
}
@media (prefers-reduced-motion: reduce){
  .pet-pet-frame::after{ animation-duration: 9s; }
  .pet-fx-halo{ animation-duration: 2.6s; }
}

/* B12 手机兜底：不依赖 @property / filter / conic 动画也能看见的光 */
.pet-pet-frame{
  box-shadow: 0 0 0 2px rgba(255,255,255,.55), 0 0 18px 6px var(--pet-pet-frame-glow, rgba(255,255,255,.55));
  border-radius: 28px;
  will-change: box-shadow, opacity;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.pet-pet-frame.is-on{
  -webkit-animation: pet-frame-breathe 2.6s ease-in-out infinite;
  animation: pet-frame-breathe 2.6s ease-in-out infinite;
}
.pet-pet-frame.is-flash{
  -webkit-animation: pet-frame-flash 1.15s ease-out 2;
  animation: pet-frame-flash 1.15s ease-out 2;
}
@-webkit-keyframes pet-frame-breathe{
  0%,100%{ box-shadow: 0 0 0 2px rgba(255,255,255,.45), 0 0 14px 4px var(--pet-pet-frame-glow, rgba(255,255,255,.45)); }
  50%    { box-shadow: 0 0 0 3px rgba(255,255,255,.85), 0 0 26px 10px var(--pet-pet-frame-glow, rgba(255,255,255,.8)); }
}
@keyframes pet-frame-breathe{
  0%,100%{ box-shadow: 0 0 0 2px rgba(255,255,255,.45), 0 0 14px 4px var(--pet-pet-frame-glow, rgba(255,255,255,.45)); }
  50%    { box-shadow: 0 0 0 3px rgba(255,255,255,.85), 0 0 26px 10px var(--pet-pet-frame-glow, rgba(255,255,255,.8)); }
}
@-webkit-keyframes pet-frame-flash{
  0%   { box-shadow: 0 0 0 2px rgba(255,255,255,.6), 0 0 10px 2px var(--pet-pet-frame-glow, rgba(255,255,255,.6)); }
  35%  { box-shadow: 0 0 0 5px rgba(255,255,255,.95), 0 0 42px 18px var(--pet-pet-frame-glow, rgba(255,255,255,.95)); }
  100% { box-shadow: 0 0 0 2px rgba(255,255,255,.6), 0 0 14px 4px var(--pet-pet-frame-glow, rgba(255,255,255,.6)); }
}
@keyframes pet-frame-flash{
  0%   { box-shadow: 0 0 0 2px rgba(255,255,255,.6), 0 0 10px 2px var(--pet-pet-frame-glow, rgba(255,255,255,.6)); }
  35%  { box-shadow: 0 0 0 5px rgba(255,255,255,.95), 0 0 42px 18px var(--pet-pet-frame-glow, rgba(255,255,255,.95)); }
  100% { box-shadow: 0 0 0 2px rgba(255,255,255,.6), 0 0 14px 4px var(--pet-pet-frame-glow, rgba(255,255,255,.6)); }
}
/* 答对时的小牛光晕（DOM 兜底，任何浏览器都动） */
.fx-fallback-glow{
  position: fixed;
  pointer-events: none;
  z-index: 9300;
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(255,240,180,.92) 0%, rgba(255,224,140,.55) 42%, rgba(255,255,255,0) 70%);
  opacity: 0;
  transform: scale(.7) translateZ(0);
  -webkit-animation: fx-fb-glow 1.6s ease-out forwards;
  animation: fx-fb-glow 1.6s ease-out forwards;
}
@-webkit-keyframes fx-fb-glow{
  0%{ opacity:0; -webkit-transform:scale(.7); } 18%{ opacity:.95; -webkit-transform:scale(1); }
  60%{ opacity:.5; -webkit-transform:scale(1.1); } 100%{ opacity:0; -webkit-transform:scale(1.22); }
}
@keyframes fx-fb-glow{
  0%{ opacity:0; transform:scale(.7) translateZ(0); } 18%{ opacity:.95; transform:scale(1) translateZ(0); }
  60%{ opacity:.5; transform:scale(1.1) translateZ(0); } 100%{ opacity:0; transform:scale(1.22) translateZ(0); }
}