/*
 * 牧场花名册（点击围栏里任意动物弹出）
 * 沿用动物卡 v6 的木质金边配色，只是把「一次一只」换成「一次一栏」。
 */
.ar-overlay{
  position:absolute;
  inset:0;
  z-index:2360;
  display:flex;
  align-items:center;
  justify-content:center;
  /* 上下留出顶部资源栏和底部导航，标题栏才不会被压在 HUD 底下 */
  padding:126px 10px 116px;
  pointer-events:auto;
  font-family:"Noto Sans SC",Inter,system-ui,sans-serif;
}
.ar-overlay[hidden]{display:none!important}
.ar-backdrop{
  position:absolute;
  inset:0;
  border:0;
  padding:0;
  background:rgba(18,28,24,.42);
  cursor:pointer;
}

.ar-panel{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  width:364px;
  max-width:96%;
  max-height:100%;
  overflow:hidden;
  border:3px solid #8a5a20;
  border-radius:20px;
  background:linear-gradient(180deg,#fff8e2 0%,#f7e6bd 46%,#efd39c 100%);
  box-shadow:0 12px 26px #21140977,inset 0 2px 0 #fffdf0;
  color:#3b291b;
  animation:ar-pop .18s ease-out;
}
@keyframes ar-pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.ar-panel{animation:none}}

/* ── 头部 ─────────────────────────────── */
.ar-head{
  flex:none;
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 10px 9px 13px;
  border-bottom:2px solid #a9762c;
  background:linear-gradient(180deg,#d3933a 0%,#b3711f 100%);
  box-shadow:inset 0 2px 0 #ffdd9b66;
}
.ar-title{
  margin:0;
  font-size:15px;
  font-weight:900;
  line-height:1.2;
  color:#fff8d7;
  text-shadow:0 2px 2px #4a2c0c;
  white-space:nowrap;
}
.ar-count{
  padding:2px 8px;
  border:1.5px solid #7a4712;
  border-radius:10px;
  background:#fff2c0;
  color:#7d4a12;
  font-size:10px;
  font-weight:900;
  line-height:1.2;
  white-space:nowrap;
}
.ar-close{
  margin-left:auto;
  width:26px;
  height:26px;
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:2px solid #7a4712;
  border-radius:9px;
  background:linear-gradient(180deg,#ffe08a,#e0a63c);
  color:#6b3d0c;
  font-size:15px;
  font-weight:900;
  line-height:1;
  cursor:pointer;
}
.ar-close:active{transform:translateY(1px)}

/* ── 状态筛选 ─────────────────────────── */
.ar-filters{
  flex:none;
  display:flex;
  gap:5px;
  padding:8px 10px;
  overflow-x:auto;
  border-bottom:1.5px solid #d2ae70;
  background:#fbeecb;
  scrollbar-width:none;
}
.ar-filters::-webkit-scrollbar{display:none}
.ar-filter{
  flex:none;
  display:flex;
  align-items:center;
  gap:4px;
  padding:4px 9px;
  border:1.5px solid #c09a55;
  border-radius:999px;
  background:#fffaea;
  color:#7a5a2c;
  font-size:10px;
  font-weight:900;
  line-height:1.25;
  white-space:nowrap;
  cursor:pointer;
}
.ar-filter img{width:13px;height:13px;flex:none}
.ar-filter b{
  min-width:15px;
  padding:0 4px;
  border-radius:999px;
  background:#e8d09a;
  color:#6b4718;
  font-size:9px;
  font-weight:900;
}
.ar-filter[aria-pressed="true"]{
  border-color:#8a5216;
  background:linear-gradient(180deg,#ffd873,#eba734);
  color:#5e340a;
  box-shadow:inset 0 1px 0 #fff5cd;
}
.ar-filter[aria-pressed="true"] b{background:#fff3cb}
.ar-filter--warn[aria-pressed="true"]{background:linear-gradient(180deg,#ffb98a,#ef7a45);border-color:#a5431a;color:#4d1d05}
.ar-filter--sick[aria-pressed="true"]{background:linear-gradient(180deg,#ff9f95,#e05540);border-color:#96301f;color:#fff0ec}
.ar-filter--sick[aria-pressed="true"] b{background:#ffe2dc;color:#8f2a1a}
.ar-filter--grown[aria-pressed="true"]{background:linear-gradient(180deg,#c8ec86,#8cc63c);border-color:#4d7a17;color:#2f5109}
.ar-filter--grown[aria-pressed="true"] b{background:#eefbd2;color:#3f6a10}

/* ── 列表 ─────────────────────────────── */
.ar-list{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:9px 10px 11px;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.ar-list::-webkit-scrollbar{width:5px}
.ar-list::-webkit-scrollbar-thumb{border-radius:999px;background:#c39a55}

.ar-empty{
  padding:26px 12px;
  color:#8a6a3d;
  font-size:11px;
  font-weight:800;
  text-align:center;
}

.ar-row{
  --health:#67c72e;
  --satiety:#efb62d;
  position:relative;
  display:grid;
  grid-template-columns:52px minmax(0,1fr);
  gap:2px 8px;
  padding:6px 8px;
  border:2px solid #cfa460;
  border-radius:14px;
  background:linear-gradient(180deg,#fffaea 0%,#fdefcb 100%);
  box-shadow:0 2px 3px #80511c26,inset 0 1px 0 #fffdf2;
  cursor:pointer;
}
.ar-row.is-focus{
  border-color:#e2901f;
  box-shadow:0 0 0 2px #ffd57a,0 3px 6px #7c4a1240;
}
.ar-row.is-sick{border-color:#e08069;background:linear-gradient(180deg,#fff2ec 0%,#fadfd4 100%)}
.ar-row.is-matured{border-color:#d8a02a;background:linear-gradient(180deg,#fff9db 0%,#ffeaa8 100%)}
.ar-row.is-due{border-color:#7fae2f;background:linear-gradient(180deg,#f8ffe6 0%,#e6f5c2 100%)}

.ar-thumb{
  grid-row:1/span 4;
  position:relative;
  width:52px;
  height:52px;
  align-self:center;
  border-radius:12px;
  background:radial-gradient(circle at 50% 78%,#f0dcae 0%,#e6cd9a 58%,#d9bd85 100%);
  box-shadow:inset 0 0 0 1.5px #c19a58;
  overflow:hidden;
}
.ar-thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center 76%;
  filter:drop-shadow(0 3px 3px #56391c40);
}

.ar-main{
  min-width:0;
  display:flex;
  align-items:center;
  gap:5px;
}
.ar-name{
  min-width:0;
  overflow:hidden;
  color:#3b291b;
  font-size:12.5px;
  font-weight:900;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* 名字里已含阶段时不渲染，这里只兜住物种名不带阶段的情况 */
.ar-stage{
  flex:none;
  padding:1.5px 5px;
  border:1px solid #7c4b1b;
  border-radius:7px;
  background:#fff5c8;
  color:#855018;
  font-size:8px;
  font-weight:900;
  line-height:1.15;
  white-space:nowrap;
}
.ar-stage[data-stage="juvenile"]{border-color:#6e942e;background:#dff3a8;color:#4c7620}
.ar-stage[data-stage="adult"]{border-color:#a46219;background:#ffe074;color:#8c4c0b}
.ar-trial{
  flex:none;
  padding:1.5px 5px;
  border:1px solid #50277a;
  border-radius:7px;
  background:linear-gradient(135deg,#c970ff,#7034b4);
  color:#fff;
  font-size:8px;
  font-weight:900;
  line-height:1.15;
  white-space:nowrap;
}
.ar-chip{display:none!important}
.ar-chip.is-feed{border-color:#e09a45;background:#ffecd2;color:#9a5318}
.ar-chip.is-sick{border-color:#e07058;background:#ffe4dc;color:#a32f24}

/* ── 体重：一行里的主角，配色沿用动物卡的金色体重框 ── */
.ar-weight{
  min-width:0;
  margin-top:3px;
  padding:5px 8px 6px;
  border:2px solid #83531d;
  border-radius:11px;
  background:linear-gradient(145deg,#fff2a2 0%,#f6c457 62%,#df9a32 100%);
  box-shadow:inset 0 2px #fffbd0,0 1px 2px #80511c2e;
}
.ar-weight__head{
  min-width:0;
  display:flex;
  align-items:center;
  gap:4px;
}
.ar-weight__head img{width:15px;height:15px;flex:none}
.ar-weight__head>span{flex:none;color:#6b4416;font-size:10px;font-weight:900;white-space:nowrap}
.ar-weight__now{
  flex:1 1 auto;
  min-width:0;
  color:#3b291b;
  font-size:18px;
  font-weight:950;
  line-height:1;
  text-align:right;
  white-space:nowrap;
  text-shadow:0 1px 0 #fff6c9;
}
.ar-weight__track{
  height:9px;
  margin-top:5px;
  border:1.5px solid #664319;
  border-radius:6px;
  background:#5a4932;
  box-shadow:inset 0 1px 2px #2c1d10aa;
  overflow:hidden;
}
.ar-weight__track>i{
  display:block;
  width:0;
  height:100%;
  border-radius:5px;
  background:linear-gradient(90deg,#7fce38,#e7c735,#f19b2b);
  box-shadow:inset 0 2px #efffa788;
  transition:width .25s ease;
}
.ar-weight__meta{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
  margin-top:3px;
}
.ar-weight__hint{
  flex:1 1 auto;
  min-width:0;
  margin:0;
  color:#6d4314;
  font-size:9px;
  font-weight:900;
  line-height:1.25;
}
.ar-weight__goal{
  flex:none;
  color:#8a5a1c;
  font-size:9px;
  font-style:normal;
  font-weight:900;
  white-space:nowrap;
}
/* 养成时间已到：再喂一次就成年 */
.ar-weight[data-phase="dueFeed"]{background:linear-gradient(145deg,#e6ffb0 0%,#a8dd52 60%,#6fae2b 100%);border-color:#4d7a17}
.ar-weight[data-phase="dueFeed"] .ar-weight__hint,
.ar-weight[data-phase="dueFeed"] .ar-weight__goal{color:#33560c}
/* 已成熟：收益在地图宝箱，卡片只报最终体重 */
.ar-weight[data-phase="matured"]{background:linear-gradient(145deg,#fff6d2 0%,#ffd873 58%,#eba734 100%)}
.ar-weight[data-phase="matured"] .ar-weight__track>i{background:linear-gradient(90deg,#f0c14a,#ffe08a)}
.ar-weight[data-phase="capped"] .ar-weight__hint{color:#8a5510}

.ar-bars{
  min-width:0;
  margin-top:3px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px 8px;
}
.ar-bar{min-width:0;display:grid;grid-template-columns:13px 1fr auto;align-items:center;gap:3px}
.ar-bar img{width:13px;height:13px}
.ar-bar__track{
  height:7px;
  min-width:0;
  border:1.5px solid #7a5a2c;
  border-radius:6px;
  background:#5a4932;
  box-shadow:inset 0 1px 2px #2c1d10aa;
  overflow:hidden;
}
.ar-bar__track i{
  display:block;
  width:0;
  height:100%;
  border-radius:5px;
  background:var(--fill,#67c72e);
  box-shadow:inset 0 2px #ffffff55;
  transition:width .25s ease;
}
.ar-bar__val{color:#5e421f;font-size:9px;font-weight:900;line-height:1;white-space:nowrap}
.ar-acts{
  grid-column:2;
  display:flex;
  gap:6px;
  padding-top:3px;
}
.ar-act{
  flex:1 1 0;
  min-width:0;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:0 4px;
  border:0;
  background:transparent url("assets/ui/animal-action-card/animal-action-card-ui-v3/ui/svg/button-feed.svg") center/100% 100% no-repeat;
  color:#fff8d7;
  font-size:11px;
  font-weight:900;
  line-height:1;
  text-shadow:0 1.5px 2px #2b1c0d;
  cursor:pointer;
}
.ar-act img{width:14px;height:14px;flex:none}
.ar-act span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ar-act--heal{background-image:url("assets/ui/animal-action-card/animal-action-card-ui-v3/ui/svg/button-medicine.svg")}
.ar-act:disabled{filter:grayscale(.85);opacity:.5;cursor:default}
.ar-act:not(:disabled):active{transform:translateY(1px)}

/* 矮屏（横屏/小机型）顶部 HUD 也矮，收紧留白换取列表高度 */
@media (max-height:640px){
  .ar-overlay{padding-top:104px;padding-bottom:92px}
}