:root{--wood:#8c4c1f;--wood-dark:#552d0f;--cream:#fff8e8;--cream-2:#f1e5c3;--green:#65ad36;--green-dark:#355f20;--blue:#39a7db;--ink:#4b301b;--muted:#816a4b;--danger:#c04c3d;--gold:#eeb34e}
.am-overlay{position:absolute;z-index:3100;inset:0;display:flex;align-items:stretch;justify-content:center;padding:68px 8px 28px;background:#24160899;pointer-events:auto}
.am-overlay>div{width:100%;max-width:374px;height:100%;min-height:0;display:flex}
.am-overlay .animal-manager{width:100%;height:100%;max-height:100%;display:flex;flex-direction:column;overflow:hidden;padding:6px;border-width:3px;border-radius:18px;font-size:11px}
.animal-manager{box-sizing:border-box;width:min(100%,374px);padding:6px;border:3px solid var(--wood-dark);border-radius:18px;background:linear-gradient(#ebbe63,#aa6224);box-shadow:0 12px 25px #2c180b66;font-family:"Noto Sans SC",system-ui,sans-serif;color:var(--ink);font-size:11px}
.animal-manager *{box-sizing:border-box}
.animal-shell{flex:1;min-height:0;display:flex;flex-direction:column;padding:6px;border:2px solid #895723;border-radius:14px;background:var(--cream);overflow:hidden}
.animal-header{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:5px 8px;border:2px solid var(--wood-dark);border-radius:10px;background:linear-gradient(#a65d28,#743b16);color:#fff8dc}
.animal-paw{width:18px;height:18px;flex:none;background:radial-gradient(circle at 50% 62%,#f3d9a4 38%,transparent 39%),radial-gradient(circle at 22% 32%,#f3d9a4 18%,transparent 19%),radial-gradient(circle at 50% 22%,#f3d9a4 18%,transparent 19%),radial-gradient(circle at 78% 32%,#f3d9a4 18%,transparent 19%)}
.animal-header h2{margin:0;font-size:15px;line-height:1.15}.animal-header small{display:block;color:#f5d99a;font-size:9px;line-height:1.2}
.animal-close{margin-left:auto;width:22px;height:22px;border:2px solid #982b21;border-radius:50%;background:#e84d3b;color:#fff7d9;font-size:14px;font-weight:900;line-height:1}
.animal-summary{flex:0 0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;margin-top:5px;padding:5px 3px;border:2px solid #ad7a35;border-radius:10px;background:var(--cream-2)}
.animal-summary span,.animal-summary strong{display:block;text-align:center}.animal-summary span{font-size:8px;color:#826542;line-height:1.15}.animal-summary strong{font-size:12px;line-height:1.2}.is-alert{color:var(--danger)}.is-ready{color:#4d8d2d}
.animal-filters{flex:0 0 auto;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;margin:5px 0 0;overflow:visible}
.animal-filter{min-width:0;padding:4px 1px;border:2px solid #65401b;border-radius:8px;background:#ead5a6;color:#5f3d21;font-size:9px;font-weight:700;white-space:nowrap}
.animal-filter[aria-selected="true"]{background:var(--green);color:white}
.animal-toolbar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:5px;padding:3px 6px;border:1px solid #c5a16a;border-radius:8px;background:#f7edda;color:var(--muted);font-size:10px}
.animal-status-filter{max-width:108px;padding:1px 2px;border:1px solid #b8894a;border-radius:6px;background:#fff8e8;color:#5f3d21;font-size:10px}
.animal-list{flex:1;min-height:120px;overflow:auto;display:grid;gap:5px;margin-top:5px;align-content:start}
.animal-empty{display:grid;place-items:center;min-height:120px;color:var(--muted);font-size:12px}
.animal-row{display:grid;grid-template-columns:54px minmax(0,1fr) 76px;align-items:stretch;gap:6px;padding:6px;border:2px solid #b88037;border-radius:12px;background:#fffaf0;min-width:0}
.animal-row.is-warning{border-color:#d46a5c;background:#fff4f0}
.animal-row.is-collectable{border-color:#62a33b;background:#f4faee}
.animal-avatar{width:54px;height:54px;align-self:center;display:grid;place-items:center;border:1px solid #c59652;border-radius:10px;background:#f3ead6;overflow:hidden}
.animal-avatar img{width:50px;height:50px;object-fit:contain}
.animal-info{min-width:0;display:flex;flex-direction:column;gap:3px;justify-content:center}
.animal-title{display:flex;align-items:center;gap:4px;min-width:0}
.animal-title h3{margin:0;font-size:12px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.animal-stage{padding:0 5px;border-radius:7px;background:#e6f1d2;color:#4d6b32;font-size:8px;line-height:15px;white-space:nowrap;flex:none}
.metric{display:grid;grid-template-columns:14px minmax(0,1fr);align-items:center;gap:4px}
.metric svg{width:13px;height:13px;display:block}
.bar{position:relative;height:11px;border:1px solid #332e28;border-radius:8px;background:#4e493e;overflow:hidden}
.bar i{display:block;height:100%;background:#65b539}
.bar.hunger i{background:#f1b82d}
.metric.is-low .bar i{background:#e08a2a}
.bar b{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;padding-right:5px;font-size:8px;font-weight:800;color:#fff;text-shadow:0 1px #0007;line-height:1}
.animal-weight{display:flex;align-items:center;gap:4px;font-size:10px;color:#6a5236}
.animal-weight svg{width:13px;height:13px;flex:none}
.animal-side{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:3px;min-width:0}
.animal-state{align-self:center;padding:1px 6px;border-radius:8px;background:#e6f1d2;color:#4d6b32;font-size:8px;line-height:15px;white-space:nowrap;text-align:center}
.is-warning .animal-state{background:#ffe0da;color:#b93f32}
.is-collectable .animal-state{background:#d9f0c6;color:#3d7a28}
.animal-side button{width:100%;padding:4px 2px;border-radius:7px;font-weight:700;font-size:10px;line-height:1.15}
.feed{border:2px solid var(--green-dark);background:var(--green);color:white}
.treat{border:2px solid #1d6282;background:var(--blue);color:white}
.collect{border:2px solid #855018;background:var(--gold);color:#5a3214}
.details,.locate{border:2px solid #8b6635;background:#ecddbb;color:#67451f}
.animal-footer{flex:0 0 auto;margin:4px 2px 0;color:var(--muted);font-size:9px}