/* ================================================
   野马角色模块 horses.css —— 独立模块（勿并入 style.css）
   页面地形物理世界：body 是坐标系，小马 absolute 锚定世界；
   覆盖 style.css 中段的 .horse position:fixed。
   若删除本文件，需同步移除 app.js「野马世界」段与
   index.html 中 5 个 .horse 节点。
   ================================================ */
body{ position:relative; }                       /* 小马世界坐标系（body margin 已为 0） */
.horse{ position:absolute !important; will-change:transform; }  /* 覆盖 style.css 中段 fixed */
/* ---- 左下角宠物：眼镜野马（站长本人吉祥物，点击开关音乐功能不变）---- */
#pet{
  width:120px; height:120px;
  background:url("../assets/horses/yan.png") center/contain no-repeat;
  animation: petFloat 7s ease-in-out infinite;
}
#pet:hover{ animation-duration:4.5s; }

/* ---- 五只性格小马：父元素 transform 由 app.js 定位，角色图与性格动画挂 :after 伪元素 ---- */
.horse{ background:none !important; }                       /* 清掉原 SVG 小马背景 */
.horse::after{
  content:''; position:absolute; left:0; top:0; width:100%; height:100%;
  background-repeat:no-repeat; background-position:center bottom; background-size:contain;
  pointer-events:none;
}
.h-free::after{   background-image:url("../assets/horses/shan.png"); animation: horseRun   3.6s ease-in-out infinite alternate; }
.h-shy::after{    background-image:url("../assets/horses/ying.png"); animation: horseShy   6.8s ease-in-out infinite; }
.h-happy::after{  background-image:url("../assets/horses/lv.png");   animation: horseBounce 1.2s ease-in-out infinite; }
.h-lazy::after{   background-image:url("../assets/horses/zong.png"); animation: horseLazy  5.6s ease-in-out infinite; }
.h-angry::after{  background-image:url("../assets/horses/lan.png");  animation: horseAngry .85s ease-in-out infinite; }

/* 尺寸建议（按你页面实际布局微调，保持等比：图是 288x512 左右竖图） */
.horse{ width:84px; height:96px; left:0; top:0; }   /* left/top 锚定视口原点，JS translate 定位才生效 */

/* ---- 关键帧：沉稳不野，贴合主站暗色气质 ---- */
@keyframes petFloat{
  0%,100%{ transform:translateY(0) rotate(0deg) scale(1); }
  25%    { transform:translateY(-7px) rotate(-1.2deg) scale(1.02); }
  50%    { transform:translateY(-2px) rotate(1deg) scale(1); }
  75%    { transform:translateY(-9px) rotate(-0.6deg) scale(1.01); }
}
@keyframes horseRun{
  0%  { transform:translateX(-42px) rotate(-5deg) scale(.98); }
  50% { transform:translateX(42px) rotate(5deg) scale(1.02); }
  100%{ transform:translateX(-42px) rotate(-5deg) scale(.98); }
}
@keyframes horseShy{
  0%,100%{ transform:translateY(0) scale(1); }
  30%    { transform:translateY(-4px) scale(1.01); }
  55%    { transform:translateY(-1px) scale(.965); }   /* 害羞缩一下 */
  70%    { transform:translateY(-5px) scale(1.005); }
}
@keyframes horseBounce{
  0%,100%{ transform:translateY(0) scale(1); }
  40%    { transform:translateY(-24px) scale(1.03, .97); }
  60%    { transform:translateY(-6px) scale(.985, 1.02); }
}
@keyframes horseLazy{
  0%,100%{ transform:translateY(0) scale(1); }
  50%    { transform:translateY(-3px) scale(1.025, .98); }
}
@keyframes horseAngry{
  0%,100%{ transform:translate(0,0) rotate(0); }
  20%    { transform:translate(-2px,1px) rotate(-1.4deg); }
  40%    { transform:translate(2px,-1px) rotate(1.4deg); }
  60%    { transform:translate(-1px,-1px) rotate(-.8deg); }
  80%    { transform:translate(2px,1px) rotate(1deg); }
}

/* 移动端降尺寸，避免动画挤占版面 */
@media (max-width:640px){
  #pet{ width:88px; height:88px; }
  .horse{ width:60px; height:72px; }
}


/* ---- 野马角色接入 · 覆盖修正（勿删） ---- */
.pet svg, .pet .note{ display:none; }              /* 隐藏原水墨宠物内部，避免与背景图重叠 */
.pet{ filter:drop-shadow(0 0 14px rgba(255,106,61,.45)); }
.h-free{   filter:drop-shadow(0 0 8px rgba(255,106,61,.55)); }
.h-shy{    filter:drop-shadow(0 0 8px rgba(255,150,200,.55)); }
.h-happy{  filter:drop-shadow(0 0 8px rgba(80,200,140,.5)); }
.h-lazy{   filter:drop-shadow(0 0 8px rgba(80,180,200,.45)); }
.h-angry{  filter:drop-shadow(0 0 8px rgba(255,60,40,.55)); }
.horse.kick::after{ animation:kick .4s ease-out !important; }  /* 踢腿放伪元素，不覆盖 JS 定位 */

/* ============ 野马控制台悬浮窗（宠物旁齿轮 + 展开面板） ============ */
.pet-stack{
  position:fixed; left:22px; bottom:22px; z-index:118;
  display:flex; flex-direction:column-reverse; align-items:flex-start; gap:10px;
}
.pet-stack #pet{ position:static; }            /* 覆盖 style.css 中段 fixed，改为随栈排列 */
.panel-gear{
  width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(61,224,200,.45);
  background:rgba(10,14,22,.85); color:#3DE0C8;
  font-size:16px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 12px rgba(61,224,200,.18);
  transition:box-shadow .2s, color .2s, border-color .2s;
}
.panel-gear:hover{ box-shadow:0 0 16px rgba(61,224,200,.45); }
.panel-gear.on{ color:#FF6A3D; border-color:rgba(255,106,61,.5); }
.horse-panel{
  width:252px;
  background:rgba(10,14,22,.94);
  border:1px solid rgba(61,224,200,.28);
  border-radius:14px; padding:12px 14px;
  box-shadow:0 10px 34px rgba(0,0,0,.55), 0 0 22px rgba(61,224,200,.12);
  backdrop-filter:blur(8px);
}
.horse-panel[hidden]{ display:none; }
.hp-head{ display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.hp-head b{ color:#fff; font-size:14px; letter-spacing:.4px; }
.hp-sub{ font-size:11px; color:#8A8F98; flex:1; }
#hpClose{
  background:none; border:none; color:#8A8F98; font-size:17px;
  line-height:1; cursor:pointer; padding:0 2px;
}
#hpClose:hover{ color:#FF6A3D; }
.hp-sec{ border-top:1px solid rgba(255,255,255,.07); padding:8px 0 2px; margin-top:6px; }
.hp-sec-t{ font-size:11px; color:#3DE0C8; letter-spacing:2px; margin-bottom:6px; }
.hp-row{
  display:flex; align-items:center; gap:8px;
  font-size:12px; color:#C9CDD4; padding:3px 0; cursor:pointer;
}
.hp-row b{ color:#FF6A3D; font-weight:600; min-width:46px; text-align:right; font-size:11px; }
.hp-name{ flex:1; }
.hp-row input[type="range"]{
  flex:1; height:4px; accent-color:#3DE0C8; cursor:pointer;
}
.hp-row input[type="checkbox"]{
  accent-color:#FF6A3D; width:15px; height:15px; cursor:pointer;
}
.hp-tip{ color:#6E7380; font-size:11px; }
@media (max-width: 640px){
  .horse-panel{ width:220px; max-height:56vh; overflow-y:auto; }
}